更改Ionic选项卡以导航到其根页,而不是导航到其最后一页

Question

我正在使用Ionic选项卡导航

<ion-tabs #mainTabs>
  <ion-tab [root]="tab1" tabTitle="Page1" tabIcon="icon-tasks"></ion-tab>
  <ion-tab [root]="tab2" tabTitle="Page2" tabIcon="icon-calendar"></ion-tab>
  <ion-tab [root]="tab3" tabTitle="Page3" tabIcon="icon-profile"></ion-tab>
</ion-tabs>

一切正常,但是当我点击一个标签时,它会转到该堆栈上的最后一个访问页面而不是堆栈的根页面.

例如:

Page1
  Subpage1 (root)
  Subpage2
  Subpage3 <-- Last visited page
Page2
Page3

如果我在最后访问的页面(Subpage3)上,那么我触摸选项卡Page3然后我触摸选项卡上的Page1它返回到Subpage3但我希望它转到Subpage1这是root.

谢谢你的帮助!

Answer 1

像Sampath评论一样,这是设计的.我发现的唯一方法是通过离子标签更改事件强制它:

tabChanged($ev) {
  $ev.setRoot($ev.root);
}

<ion-tabs #mainTabs (ionChange)="tabChanged($event)">
  <ion-tab [root]="tab1" tabTitle="Page1" tabIcon="icon-tasks"></ion-tab>
  <ion-tab [root]="tab2" tabTitle="Page2" tabIcon="icon-calendar"></ion-tab>
  <ion-tab [root]="tab3" tabTitle="Page3" tabIcon="icon-profile"></ion-tab>
</ion-tabs>

Answer 2

Ionic 5 的替代方法

.html

<ion-tabs (ionTabsDidChange)="setRootTab($event)">
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="speakers">
      <ion-icon name="person-circle"></ion-icon>
      <ion-label>Speakers</ion-label>
    </ion-tab-button>
 
</ion-tabs>

.ts

 setRootTab(event: any): void {
    switch (event?.tab) {
      case 'schedule':
           
          this.router.navigateByUrl('tabs/schedule');

        break;

      case 'speakers':
        this.router.navigateByUrl('tabs/speakers');

        break;

    

      default:
    }
  }

这是设计使然

这是设计使然。换句话说，每个个体ion-tab都是 的声明性组件NavController。因此，如果您将某些内容推送到该tab's NavController选项卡，那么当您再次返回该选项卡时，它会保留在那里。

NavController 是 Nav 和 Tab 等导航控制器组件的基类。您可以使用导航控制器导航到应用程序中的页面。在基本层面上，导航控制器是代表特定历史记录（例如选项卡）的页面数组。可以通过推送和弹出页面或在历史记录中的任意位置插入和删除页面来操作该数组以在整个应用程序中导航。

请参阅文档以获取更多信息。