以下是StackBlitz上的问题转载代码,根据需要自由调整。
https:/stackblitz.comeditionic-yjlfhv?file=app%2FTabsPage.ts。
预期的行为是OptionPage广播了一个Changed事件,然后TabsPage做出反应,为 "View "标签设置了一个不同的rootPage。当标签页被程序或用户选择时,这应该会得到反映。
即使TabsPage.ts代码没有以编程方式选择 "视图 "选项卡,"视图 "选项卡仍然需要明确的用户点击来更新。
如何解决这个问题呢,谢谢。
对于迭代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);
})
}
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);
}
})
}
}