如何在ionic中更改选项卡上弹出所有选项卡堆栈？

Question

我当前的标签代码将所有页面一一堆叠在一起，以形成单独的标签。因此，当我更改选项卡时会显示以前的堆叠页面，我想在更改选项卡时将所有选项卡设置为root。这是我当前的代码

SELECT  u.Name, 
        u.Class_ID, 
        g.Teacher, 
        g.Subject, 
        g.Time 
FROM `User` AS u
JOIN Grade AS g 
  ON u.Class_ID = g.Class_ID 
WHERE u.Class_ID = 100

export class TabsPage {

  tab1Root = HomePage;
  tab2Root = SearchPage;
  tab3Root = QueuesPage;
  tab4Root = FavoritesPage;
  tab5Root = SettingsPage;

  constructor() {

  }
}

Answer 1

我可以通过获取选项卡组件的引用，然后从上一个选项卡访问NavController并调用popToRoot()方法，来实现您要查找的内容：< / p>

<!-- #myTabs allow us to get a reference of the tabs -->
<!-- (ionChange) allow us to run our method every time the selected tab is changed -->
<ion-tabs #myTabs (ionChange)="onTabsChange()">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

然后：

// Angular
import { Component, ViewChild } from '@angular/core';

// Pages
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

// Tabs
import { Tabs } from 'ionic-angular';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  @ViewChild('myTabs') tabRef: Tabs;

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  onTabsChange() {
    // Get the previous tab if any
    const previousTab = this.tabRef.previousTab(false);

    if(previousTab) {
      try {
        // Get the navCtrl and pop to the root page
        previousTab.getViews()[0].getNav().popToRoot();
      } catch(exception) {
        // Oops...
        console.error(exception);
      }
    }
  }
}

---

Stackblitz Project

Answer 2

对于 Ionic 4/5 ，我在自己的情况下使用了此解决方案，它可以满足我的需求：

在<ion-tab-button>中，我不得不将选项卡与 routerLink 结合使用，并且对我来说效果很好：原因？我发现没有使用eventHandler，navController和没有处理生命周期的其他方法：

<ion-tab-button class="dashboard__button" tab="beneficiaries" routerLink="/dashboard/beneficiaries">

因此，每次退出并返回时，它始终是针对根页面的。

-链接参考： Goto first page in tab when tab change