标签更改时清除导航堆栈

Question

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

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

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

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

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

Answer 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');
}

Answer 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);
        }
    }
}

标签更改时清除导航堆栈

Clear navigation stack on tab change

angular

ionic-framework

ionic5