Блог

Я использую Ionic 5, и мы используем вкладки для навигации. Пример:

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

Но вот сценарий, который создает нам проблемы:

1. Пользователь переходит на вкладку главная
2. Пользователь нажимает на подстраницу моего профиля на главном экране
3. Пользователь переходит на другую вкладку
4. Пользователь снова нажимает вкладку «Главная», и вместо перенаправления на главный экран он перенаправляется в мой профиль, потому что это последняя страница в стеке

Вопрос в том, можем ли мы каким-то образом очистить стек навигации при изменении вкладки и перенаправить пользователя на экран корневой вкладки, который в данном случае является домашним.

вы можете попробовать что-то вроде этого

HTML:

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

тс:

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

Я нашел ответ на этот вопрос здесь: 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 amp; { tab: string };
        // without checking resetStackTabs this will work for any tab
        if (this.resetStackTabs.includes(tab) amp;amp;
            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);
        }
    }
}