Ionic 2：添加新的动态选项卡后刷新选项卡视图

Posted 2023-02-22

【中文标题】Ionic 2：添加新的动态选项卡后刷新选项卡视图

【英文标题】：Ionic 2 : Refresh tabs view after adding a new dynamic tab

【发布时间】：2017-09-12 10:22:13

【问题描述】：

我正在使用离子标签。一些标签是从数据库中生成的（那些没有图标的）

现在，当我添加一个新选项卡并刷新数组时，我应该得到 3 个动态选项卡。相反，我有 5 个（前 2 个和前 2 个带有最新创建的选项卡）尽管数组正确地有 3 个对象。

[对象，对象，对象]

所以这里的相关代码（标签组件有一个监听标签创建的事件）：

// tabs.ts

import  Component  from '@angular/core';
import  Events  from 'ionic-angular';
import  DatabaseService  from "../../providers/database.service";

import  ItemsPage  from '../items/items';
import  ContactPage  from '../contact/contact';
import  HomePage  from '../home/home';
import  CategoryPage  from '../category/category';

@Component(
  templateUrl: 'tabs.html'
)
export class TabsPage 

  categories: any = [];

  tab1Root = HomePage;
  tab2Root = CategoryPage;
  tab3Root = ItemsPage;
  tab4Root = ContactPage;

  constructor(public databaseService: DatabaseService, public events: Events) 
      this.events.subscribe('category:created', () => 
      this.refreshTabs();
    );
  

  ngOnInit() 
    this.refreshTabs();
  

  refreshTabs() 
    this.databaseService.getCategories().then(categories => 
      this.categories = categories;
      console.log(this.categories); // [Object, Object, Object]
    );
  

所以每当我添加或编辑我调用的标签时：

this.events.publish('category:created');

tabs.html：

<ion-tab [root]="tab2Root" tabTitle=" category.name " [rootParams]="category.id" *ngFor="let category of categories"></ion-tab>

知道为什么选项卡上的视图不正确吗？

更新：

似乎使用this.category.push(id: 1, name: 'a category name') 是有效的，但我宁愿刷新整个数组，这样我就可以从 sql 查询中按我想要的方式排序。

Subject has been posted on ionic forum as well

【问题讨论】：

动态标签似乎是开放问题github.com/driftyco/ionic/issues/10632 和github.com/driftyco/ionic/issues/10805

无赖...感谢您提供此信息。解决方案是实现我自己的标签吗？我真的不喜欢这个解决方案，但我想我别无选择，我等不了几个星期。

您是否尝试过 Ionic 页面生命周期？ saniyusuf.com/ionic-by-component-page-lifecycle 在构造函数中订阅 category:created 事件。您是否需要在刷新时取消订阅并重新订阅，服务调用介于两者之间？

这个工作成功了吗？

@Brieuc，我正在添加一个答案，我不确定但试一试。

【参考方案1】：

尝试手动触发变更检测 -

import  Component, NgZone  from '@angular/core';
import  Events  from 'ionic-angular';
import  DatabaseService  from "../../providers/database.service";

import  ItemsPage  from '../items/items';
import  ContactPage  from '../contact/contact';
import  HomePage  from '../home/home';
import  CategoryPage  from '../category/category';

@Component(
  templateUrl: 'tabs.html'
)
export class TabsPage 

  categories: any = [];

  tab1Root = HomePage;
  tab2Root = CategoryPage;
  tab3Root = ItemsPage;
  tab4Root = ContactPage;

  constructor(public databaseService: DatabaseService, public events: Events, private ngZone: NgZone) 
      this.events.subscribe('category:created', () => 
      this.refreshTabs();
    );
  

  ngOnInit() 
    this.refreshTabs();
  

  refreshTabs() 
    this.databaseService.getCategories().then(categories => 
    this.ngZone.run(() => 
      this.categories = categories;
      console.log(this.categories); // [Object, Object, Object]
    );
  );
  

【讨论】：

我记得我用 NgZone 尝试过一些东西，但当时没有用。你试过测试吗？干杯！

【参考方案2】：

在您的构造函数中使用它来检测更改并刷新您的页面。

constructor(private ref: ChangeDetectorRef)

 refreshTabs() 
    this.databaseService.getCategories().then(categories => 
      this.categories = categories;
      console.log(this.categories); // [Object, Object, Object]
      this.changeDetectorRef.detectChanges();
    );
  );
  

【参考方案3】：

refreshTabs() 
    this.databaseService.getCategories().then(categories => 
      this.categories = categories;
      this.categories = [...this.categories]
      console.log(this.categories); // [Object, Object, Object]
    );

你可以应用这个。

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。

【参考方案4】：

我认为目前解决此问题的最佳方法是这样做：

// Wherever you are calling push, refresh the tabs as well

// Like this: 

yourMethodWhereYouPush() 
  this.category.push(id: 1, name: 'a category name'); 
  this.refreshTabs(); // Add this line so that once you push it, immediately the tabs will be refreshed with new data;