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

  }

}

2 Answers 2

0

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.

1
  • Confused what the component would look like in this situation because as I have it, I'm still getting the same issue. Commented Aug 3, 2017 at 3:29
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.