setRoot for Tab pages in Ionic 2+

问题:

I have two maps. Each map is on its own view. I am using tabs to jump from view to view. However, when I use this method of navigation, the root is not being set and the page is not being pushed or popped or set once it has been visited. This is an issue with the google maps I am using. This functionality doesn't seem to take place when I am using a regular menu with set root in the menu area. Please Help. Thanks.

tabs.html

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

tabs.ts

export class TabsPage {
  tab1Root: any = Tab1Root;
  tab2Root: any = Tab2Root;

  tab1Title = "title1";
  tab2Title = "title2";

  constructor(public navCtrl: NavController) {

  }

}

回答1:

About the navigation between tabs with code, you can do it like this. You should use select(index|tab) method of Tabs. You can get the ref of Tabs in your tab pages. like

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

Then in component, using @ViewChild('theTabs') tabRef: Tabs to get ref to the Tabs instance.

[Updated]
And for google map, if you want to use it in SPA like angular, ionic, you should call it's init method in the init function of component.

回答2:

Please use following example

tabs.html

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

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

}

Add following code in menu.ts(app.ts) file for navigation

openPage(page) {
    let params = {};

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

I hope its work for you.