setRoot for Ionic 2+ 中的选项卡页面

Question

我有两张地图。每个地图都位于其自己的视图上。我正在使用选项卡从一个视图跳到另一个视图。但是，当我使用这种导航方法时，没有设置根，并且页面在访问后不会被推送、弹出或设置。这是我使用的谷歌地图的问题。当我在菜单区域中使用带有 set root 的常规菜单时，此功能似乎没有发生。请帮忙。谢谢。

选项卡.html

<ion-tabs>
<ion-tab [root]="tab1Root" [tabTitle]="tab1Title"></ion-tab>
<ion-tab [root]="tab2Root" [tabTitle]="tab2Title"></ion-tab>
</ion-tabs>

标签.ts

export class TabsPage {
tab1Root: any = Tab1Root;
tab2Root: any = Tab2Root;
tab1Title = "title1";
tab2Title = "title2";
constructor(public navCtrl: NavController) {
}
}

Answer 1

关于使用代码的选项卡之间的导航，您可以这样做。 您应该使用select(index|tab)Tabs的方法。您可以在标签页中获取Tabs的引用。喜欢

<ion-tabs #theTabs selectedIndex="{{tabIndexNum}}" class="customer-tab">
<ion-tab [root]="tab1Root" [tabsHideOnSubPages]="true"></ion-tab>
<ion-tab [root]="tab2Root"[tabsHideOnSubPages]="true"></ion-tab>
</ion-tabs>

然后在组件中，使用@ViewChild('theTabs') tabRef: Tabs获取对Tabs实例的引用。

[更新]
对于谷歌地图，如果你想在SPA中使用它，如角度，离子，你应该在组件的init函数中调用它的init方法。

Answer 2

请使用以下示例

选项卡.html

<ion-tabs [selectedIndex]="mySelectedIndex">
<ion-tab [root]="tab1Root" [tabTitle]="tab1Title"></ion-tab>
<ion-tab [root]="tab2Root" [tabTitle]="tab2Title"></ion-tab>
</ion-tabs>

标签.ts

import { NavParams } from 'ionic-angular';
export class TabsPage {
tab1Root: any = Tab1Root;
tab2Root: any = Tab2Root;
tab1Title = "title1";
tab2Title = "title2";
constructor(navParams: NavParams) {
this.mySelectedIndex = navParams.data.tabIndex || 0;
}
}

在menu.ts(app.ts(文件中添加以下代码以进行导航

openPage(page) {
let params = {};
if (page.index) {
params = { tabIndex: page.index };
}
}

我希望它对你有用。