如何动态更改一个Tab的内容页?

问题描述 投票:0回答:1

以下是StackBlitz上的问题转载代码,根据需要自由调整。

https:/stackblitz.comeditionic-yjlfhv?file=app%2FTabsPage.ts。

预期的行为是OptionPage广播了一个Changed事件,然后TabsPage做出反应,为 "View "标签设置了一个不同的rootPage。当标签页被程序或用户选择时,这应该会得到反映。

即使TabsPage.ts代码没有以编程方式选择 "视图 "选项卡,"视图 "选项卡仍然需要明确的用户点击来更新。

如何解决这个问题呢,谢谢。

angular ionic3
1个回答
3
投票

对于迭代https:/stackblitz.comeditionic-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);
    })
  }

1
投票

https:/stackblitz.comeditionic-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);
      }
   })
}
}
© www.soinside.com 2019 - 2024. All rights reserved.