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

Posted 2023-03-13

【中文标题】更改 Ionic 选项卡以导航到它们的根页面而不是它们的最后一页

【英文标题】：Change Ionic Tabs to navigate to their root page and not to their last page

【发布时间】：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。

感谢您的帮助！

【问题讨论】：

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

【参考方案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 中也不起作用，但这个答案可以：***.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 仍然存在这个问题。此解决方案破解它：***.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 会将最后访问的页面从堆栈中弹出

【讨论】：

是的，但你会看到过渡。