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）上，那么我触摸标签页面3，然后触摸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

这是设计使然。换句话说，每个人ion-tab都是NavController的声明性组件。所以，如果你向tab's NavController推送一些内容，那么当你再次回到那个标签时，它仍然存在。我们无法为此做任何事情。

NavController是导航控制器组件的基类像Nav和Tab。您使用导航控制器导航到页面在你的应用程序中在基本级别，导航控制器是一个数组代表特定历史的页面（例如Tab）。这个通过推送和操作可以操纵数组以在整个应用程序中导航弹出页面或在中的任意位置插入和删除它们历史。

请参阅Doc for more info。

Answer 3

所以我这样做是为了修复最新的 angular 和 ionic

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

我们在 ts 中的约会（）函数是：

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

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

Answer 4

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

Answer 5

尝试一下：

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

弹出或返回会弹出堆栈中最后访问的页面

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

5 个答案: