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

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

2 个答案: