ionic 3：动态创建选项卡并选择它

Question

我正在使用 ionic 3 angular 并构建一个 Web 应用程序。我有一个要求是一个选项卡组件，其中第一个选项卡显示一个列表。单击每个列表项会创建一个新选项卡并显示一些内容。

我的实现方式是：

<ion-tabs #myTabs tabsPlacement="top" tabsLayout="icon-end">
  <ion-tab *ngFor="let tb of core.dynamicTabs" [root]="tb.pageName" tabTitle="{{tb.tabTitle}}" tabIcon="close" (ionSelect)="onTabActive($event)"></ion-tab>
</ion-tabs>

我保留一个共享数组来存储标签相关数据，例如

@Injectable()
export class CoreStructureProvider {
  dynamicTabs: any[];

  constructor(public http: Http) {
    this.dynamicTabs = [{ "pageName": MyListPage, "tabTitle": rw.name, "optyId": rw.OptyId }];
  }
}

所以从第一个标签页开始，创建新标签页的代码是：

createTab(rw){
  this.core.dynamicTabs.push({ "pageName": EditOptyPage, "tabTitle": rw.name, "optyId": rw.OptyId });
  (this.navCtrl.parent).select(1)

}

除了选项卡选择之外，一切都很好。只是为了简化问题，我将值硬编码为 1。因此，理想情况下，每次调用 createTab 时都应该选择第二个选项卡。

但这是我看到的行为： 当您第一次来时：只有一个选项卡显示列表。您单击列表中的一项，并创建一个新选项卡。但是，它不会成为活动选项卡。

现在在列表中的任何其他链接上再单击一次，这一次，从现在开始，第二个选项卡将变为活动状态。

所以我不确定为什么第一次没有触发？

Answer 1

根据对 ionic 论坛的一些研究，人们表示设置选项卡的摘要存在问题。所以以后你必须异步调用你的方法

setTimeout(()={(this.navCtrl.parent).select(1)},100);

100 只是我选择的一个随机数。