更改 Ionic 选项卡以导航到它们的根页面而不是它们的最后一页答案

【问题标题】：Change Ionic Tabs to navigate to their root page and not to their last page更改 Ionic 选项卡以导航到它们的根页面而不是它们的最后一页
【发布时间】：2018-01-21 12:50:42
【问题描述】：

我正在使用离子标签导航

<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。

感谢您的帮助！

【问题讨论】：

这个问题和另一个类似：stackoverflow.com/questions/59630946/…

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

就像 Sampath cmets 一样，这是设计使然。我发现的唯一方法是通过 ion-tab 更改事件来强制它：

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>

【讨论】：

我想你忘记了事件参数 (ionChange)="clickTab($event)"
这在 Ionic 4 中不起作用。它将是 (ionTabsDidChange)="tabChanged($event)，但事件是 CustomEvent<{tab: string}> 类型，没有 root 或 setRoot。
你把tabChanged($ev) { $ev.setRoot($ev.root); }的代码放在哪里了？
有谁知道如何为 Ionic v1 应用程序执行此操作？甚至可以在v1中做吗？尝试修复使用$state.go("tabRoot") 的旧应用程序，以在单击菜单选项卡按钮时强制选项卡子视图返回父/根视图 - 它可以工作，但它很难看，因为您确实看到子视图转换回父视图看法。在用户将子视图留给另一个选项卡后，我找不到任何其他方法将选项卡返回到根视图...然后返回到相关选项卡。
这在 Ionic v5 中也不起作用，但这个答案可以：stackoverflow.com/questions/59630946/…

【解决方案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 是导航控制器组件的基类像导航和标签。您使用导航控制器导航到页面在您的应用程序中。在基本层面上，导航控制器是一个数组代表特定历史的页面（例如选项卡）。这可以通过推送和操作数组来导航整个应用程序弹出页面或在任意位置插入和删除它们历史。

请查看Doc for more info。

【讨论】：

这种设计并不意味着不可能实现 OP 的要求。事实上，@Salva Bordas 的回答确实按要求工作
作为开发人员，永远小心说“不能”！ :D
这种行为很奇怪！它至少应该是可配置的。 Ionic v5 仍然存在这个问题。此解决方案破解它：stackoverflow.com/a/59632336/3317037 作为参考，这是处理此问题的确切 Ionic 代码行：github.com/ionic-team/ionic-framework/blob/…
@daymannovaes 更改非常容易。请参阅上面的更新。
@Sampath 感谢您的更新。它有效，但不幸的是仍然是解决 Ionic 奇怪行为的一种 hacky 方式。

【解决方案3】：

所以我这样做是为了修复最新的角度和离子

 <ion-tab-button (click)="appointments()" tab="appointments">

而我们ts中的约会()函数是：

appointments(): void {                  
  this.router.navigate(['/customer/appointments']);
}

很简单，我们只是在我们需要的页面上路由，并没有打开这个奇怪的最后一页。

【讨论】：

【解决方案4】：

在每个子页面上使用 this.navCtrl.popToRoot() 函数。你可以在这里找到更多关于它的信息。 https://ionicframework.com/docs/api/navigation/NavController/

【讨论】：

这在 Ionic 4 中不存在。
@Russ OP 指定的只有 Ionic 2 和 Ionic 3 标签。
明白。只需为 Ionic4 中访问此页面的人员添加信息。
popToRoot 确实存在于 ionic 4 github.com/ionic-team/ionic/blob/…

【解决方案5】：

试试这个：

this.navCtrl.goBack();//for ionic 4
this.navCtrl.pop(); //ionic 3

因为 pop 或 goback 会将最后访问的页面从堆栈中弹出

【讨论】：

是的，但你会看到过渡。