Как динамически изменить страницу содержимого вкладки?

Question

Вот код воспроизведения проблемы на StackBlitz, не стесняйтесь настраивать по мере необходимости.

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

Ожидаемое поведение заключается в том, что OptionPage транслирует Измененное событие, после чего TabsPage реагирует и устанавливает другую rootPage для вкладки «Вид». Это должно отражаться, когда вкладка выбирается программно или пользователем.

Даже если код TabsPage.ts не выбирает программно вкладку «Вид», вкладка «Вид» все еще требует явного щелчка пользователя для обновления.

Как мы можем это исправить? Спасибо.

Answer 1

Для итерации 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);
    })
  }

Answer 2

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