时间戳

首页 > 解决方案 > 单击选项卡有时会显示错误的页面

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

问题描述

我有一个 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>

我如何确保当我点击我要去的一个选项卡并为该选项卡设置根页面时？

谢谢！

标签： ionic3

解决方案

这是默认设置。这意味着这就是标签和导航的预期工作方式。阅读文档。

如果要在每次选择选项卡时查看选项卡的根目录，请执行以下操作：

在你的tabs.html

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

在你的tabs.ts

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

推荐阅读