Question

我有一个Ionic 3项目。我正在使用惰性加载导航。

有时候，当我在选项卡导航中单击一个选项卡时，会发生一件奇怪的事情。

它会转到上一个历史记录中的另一个页面，而不是转到根选项卡页面。换句话说，如果我转到“联系人”的子页面，则单击“个人资料”选项卡，然后单击“联系人”选项卡。它没有显示主“联系人”页面，而是显示了我先前打开的“联系人”子页面。

这是控件的外观：

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = 'ContactsPage';
  tab2Root = 'AlertsPage';
  tab3Root = 'SharePage';
  tab4Root = 'ProfilePage';
  tab5Root = 'SettingsPage'

  constructor() {

  }
}

她是html的样子：

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Contacts" tabIcon="ai-icon_contacts" class="theTab"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Alerts" tabIcon="ai-icon_alerts"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Share" tabIcon="ai-icon_share"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="ai-icon_profile"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Settings" tabIcon="ai-icon_settings"></ion-tab>
</ion-tabs>

如何确保我单击要转到的选项卡之一并设置该选项卡的根页面？

谢谢！

Answer 1

这是默认设置。这意味着这些选项卡和导航将如何工作。阅读docs。

如果您希望每次选择标签时都查看标签的根，请执行以下操作：

在您的tabs.html

<ion-tabs (ionChange)="tabChange($event)">
...
<ion-tabs>

在您的tabs.ts

tabChange(ev){
    ev.setRoot(ev.root);
}

单击选项卡有时会显示错误的页面

1 个答案: