如何动态更改选项卡的内容页面？

Question

这里是StackBlitz上问题的复现代码，大家可以根据需要随意调整。

https://stackblitz.com/edit/ionic-yjlfhv?file=app%2FTabsPage.ts

预期的行为是 OptionPage 广播 Changed 事件，然后 TabsPage 做出反应并为“View”选项卡设置不同的 rootPage。 This should get reflected when the tab is selected programmatically or by the user.

即使 TabsPage.ts 代码没有以编程方式 select 视图选项卡，视图选项卡仍然需要用户明确点击才能更新。

我们该如何解决这个问题？谢谢。

Answer 1

https://stackblitz.com/edit/ionic-tgcblm

你可以这样试试，

.View2Page

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";
import { View1Page } from "./View1Page";
import { ViewService } from "./ViewService";

@Component({
   selector: "View2Page",
   templateUrl: "View2Page.html"
})

export class View2Page {

constructor(
   public navController: NavController,
   public ViewService: ViewService
) {
}

ionViewDidEnter() {
   this.ViewService.OptionChanged.subscribe(data => {
      if (data === 'View1') {
         this.navController.setRoot(View1Page);
      }
   })
}
}

Answer 2

用于迭代 https://stackblitz.com/edit/ionic-shrsj2

在OptionsPage.html

<span *ngFor="let page of pages; index as i" >
   <button ion-button
      (click)="ViewSet(i)">
      Broadcast OptionsChanged to View{{i+1}}
    </button>
</span>

在OptionsPage.ts

  pages = [
    View1Page,
    View2Page
  ];

  constructor(
    public ViewService: ViewService
  ) {
    this.ViewSet(0);
  }

  ViewSet(i) {
    this.ViewService.OptionChanged.next(this.pages[i]);
  }

在TabsPage.html

<ion-tabs>
    <ion-tab [root]="optionPage" tabTitle="Options" tabIcon="settings"></ion-tab>
    <ion-tab [root]="tabPage" [tabTitle]="'View'" tabIcon="information-circle">
  </ion-tab>
</ion-tabs>


optionPage = OptionsPage;
tabPage = ViewPages;

在ViewPages.ts

  constructor(
    public navController: NavController,
    public ViewService: ViewService
  ) {
  }

  ionViewDidEnter() {
    this.ViewService.OptionChanged.subscribe(data => {
      this.navController.setRoot(data);
    })
  }

如何动态更改选项卡的内容页面？

How to Change a Tab's content page dynamically?

angular

ionic3