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

这是StackBlitz问题的复制代码，请根据需要随时调整

预期的行为是OptionPage广播一个已更改的事件，然后TabsPage作出反应并为“视图”选项卡设置不同的根页面。当以编程方式或由用户选择选项卡时，应反映出这一点

即使TabsPage.ts代码没有以编程方式选择视图选项卡，视图选项卡仍然需要显式用户单击才能更新

我们如何解决这个问题？ 多谢各位

你可以这样试试

.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);
      }
   })
}
}

用于迭代

在OptionsPage.html中

在TabsPage.html中

---

感谢您寻找解决方案，为了简化帖子，我只展示了2个视图，但我有很多视图。我担心您的代码在View1页面和View2页面中有相互的意识。是否可以通过服务对您的解决方案进行不同的编码，以便查看页面彼此不了解？我不确定setRoot将如何影响应用程序的导航，但我会接受这一点。谢谢。我甚至很难理解为什么你的代码会这样工作。View2Page是如何监听订阅View1消息到setRootView1Page的，该消息“如此违反直觉，您能解释一下逻辑吗？”？。非常感谢。我已经在ViewXPages上使用NavParams、getActiveNav、getActiveNav、Tabs.select、Content.resize进行了十几次迭代和尝试，但至今没有成功尝试此变体@Meryan请告诉我此代码是否比以前的代码更适合您。非常感谢您投入时间，我更喜欢您的第二次和第三次回答。我可能不得不接受它作为一种解决办法。[tabTitle]=“查看”的意义是什么？为什么不使用tabTitle=View，这似乎也很有效。在使用了3年多的ionic/angular编码之后，我觉得自己很傻。我仍然不理解这些细微差别：他们让他们的框架成为了一种不必要的痛苦，就我而言，70%的时间我都在与这些愚蠢的问题作斗争，而不是处理我的应用程序问题。我仍然在玩弄这个答案。1您在初始视图选项卡中使用了空的虚拟默认页面ViewPages。2使此页面侦听广播并在接收到的页面上执行setRoot 3使选项页面广播实际页面实例。关于后者，是否可以使选项页不知道实际视图？也许可以将它委托给一个服务？在看到您的上两次迭代之前，我打算采用我在另一个应用程序中使用的方法，在这种方法中，我避免尝试更改选项卡分配的页面，因为这是一种痛苦。相反，我让ViewPages承载几个视图标题组件VH1、VH2、VH3。。同样，使其内容宿主多个视图内容子组件VC1、VC2、VC3。。。然后，我通过[hidden]或*ngIf根据某个全局服务标志显示和隐藏。请看一下您答案中的这种变化。1我将知识/参考移动到View1Page，将View1Page移动到ViewService 2，让app.comp.ts订阅并执行导航，尽管ViewService对我来说是一个更直观的地方。3仍然存在一个小故障，因为我可能在app.component.ts中获取了错误的导航，因为当我单击“视图”选项卡时，会出现虚拟页面ViewPages。

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

  pages = [
    View1Page,
    View2Page
  ];

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

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

<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;

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

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