更改选项卡时清除导航堆栈答案

【问题标题】：Clear navigation stack on tab change更改选项卡时清除导航堆栈
【发布时间】：2021-04-08 05:36:16
【问题描述】：

我使用的是 Ionic 5，我们使用标签进行导航。示例：

<ion-tabs>
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home">

但这是让我们遇到问题的场景：

用户导航到主页选项卡
用户在主屏幕上单击“我的个人资料”子页面
用户点击另一个标签
用户再次单击主页选项卡，而不是被重定向到主屏幕，他被重定向到“我的个人资料”，因为它是堆栈中的最后一页

问题是我们能否以某种方式清除选项卡更改时的导航堆栈，并将用户重定向到根选项卡屏幕上，在这种情况下就是主页。

【问题讨论】：

标签： angular ionic-framework ionic5

【解决方案1】：

你可以试试这样的

HTML：

<ion-tab-button tab="tab1" (click)="clickTab()">
    <ion-label class="rg-label-menu">You tab name</ion-label>
</ion-tab-button>

ts：

clickTab() {
    this.router.navigateByUrl('/tabs/tab1');
}

【讨论】：

【解决方案2】：

我在这里找到了答案：https://github.com/ionic-team/ionic-framework/issues/17761

代码如下：

<ion-tabs #tabs>
    <ion-tab-button tab="tab1" (click)="handleTabClick($event)">
        <ion-label>Tab</ion-label>
    </ion-tab-button>
</ion-tabs> 

class TabsPage {
    @ViewChild('tabs') tabs: IonTabs;

    resetStackTabs = ['inbox', 'tasks'];
    handleTabClick = (event: MouseEvent) => {
        const { tab } = event.composedPath().find((element: any) =>
            element.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };
        // without checking resetStackTabs this will work for any tab
        if (this.resetStackTabs.includes(tab) &&
            this.tabs.outlet.canGoBack(1, tab)) {
            event.stopImmediatePropagation();

            // here we may need pop depth more than one if we handle deeper nav for a tab
            return this.tabs.outlet.pop(1, tab);
        }
    }
}

【讨论】：