Ionic 4 的选项卡栏 - 如何始终显示选项卡根页面而不是选项卡子页面

Question

我目前在一个选项卡中有一个子路由：

/mytab
/mytab/subpage

当我在子页面时，点击另一个标签再返回，会显示我之前所在的子页面（默认行为）。

我想让它始终在点击标签按钮时显示根页面（而不是子页面）。

我尝试将按钮参数tab='mytab'更改为href='/mytab'——这可以实现目标，但每次点击时都会导致页面刷新。

<ion-tab-button href="/tabs/mytab">
  <ion-icon name="ios-list"></ion-icon>
  <ion-label>mytab</ion-label>
</ion-tab-button>

有其他方法可以达到这个目的吗？

- anderlaini

Answer 1

每次标签页改变时，我会导航到其根页面。

在我的.html文件中：

<ion-tabs #myTabs (ionTabsDidChange)="tabChanged()">
  <ion-tab-bar>
    // Your tab buttons
  </ion-tab-bar>
</ion-tabs>

在我的.ts文件中

import {NavController, IonTabs } from '@ionic/angular';

@ViewChild('myTabs', {static: false}) myTabs: IonTabs;

constructor(private navCtrl: NavController) {}

tabChanged() {
  var currentTab: string = this.myTabs.getSelected();
  this.navCtrl.navigateRoot('tabs/' + currentTab);
}

- Mauro Semproni