Question

我有两张地图。每张地图都在自己的视图中。我正在使用制表符从视图跳转到视图。但是，当我使用这种导航方法时，没有设置根，并且一旦访问了页面，页面就不会被推送或弹出或设置。这是我正在使用的谷歌地图的问题。当我在菜单区域中使用带有set root的常规菜单时，似乎不会发生此功能。请帮忙。感谢。

tabs.html

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

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

  constructor(public navCtrl: NavController) {

  }

}

tabs.ts

    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3"><img alt="my image" class="img-about" src="Images/s1.fw.png"></div>
        <div class="col-md-3">
            <h2>aa</h2>
        </div>

Answer 1

关于带代码的选项卡之间的导航，您可以这样做。您应该使用select(index|tab)的{{1}}方法。您可以在标签页中获得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实例的参考。

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

Answer 2

请使用以下示例

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

}

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

openPage(page) {
    let params = {};

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

我希望它适合你。

setRoot for Ionic 2+中的Tab页面

2 个答案: