Allow to reset tab navigation stack on changing tabs.

Feature Request

Ionic version: [x] 4.x

Describe the Feature Request Allow to reset tab view stack on changing tabs.

Currently ion-tabs navigation on changing the tab to one selected in the past having some sub views opened brings back the the most recent view for this tab.

Describe Preferred Solution in some cases restoring view stack may be confusing to the user - thus there should be an option to reset the tab to the root component.

also both ionTabsWillChange and ionTabsDidChange are called just one after another emitting same new tab while I’d expect to be able to know also the leaving tab (add leavingTab property to the event?).

finally ionTabsWillChange is fired only after the new tab is already visible while I’d expect to get ionTabsWillChange before activating new tab and only ionTabsWillChange after (this probably can be a separate bug)

Describe Alternatives

if there is a way to achieve this without side effect - would be good to add this information to the documentation.

Related Code

Additional Context

here is similar concern from another person on SO: https://stackoverflow.com/questions/53687233/how-to-reset-route-stack-after-routing-away-from-tab-using-angular-ionic-4#comment96962743_53687233

[gaetancollaud]

Hi, with Ionic 5, my dirty solution is to directly use the router:

  // Tabs that need reset when you click on them
  resetStackTabs = ['koalas'];

  @ViewChild('tabs') tabs: IonTabs;

  constructor(private router:Router) {
  }

  handleTabClick = (event: MouseEvent) => {
    const {tab} = event.composedPath().find((element: any) =>
      element.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };

    if (this.resetStackTabs.includes(tab)){
      this.router.navigate(['tabs/'+tab]);
    }
  };

<ion-tab-button tab="koalas" (click)="handleTabClick( $event)">

[leoruhland]

Hey @ciekawy!

I think I have a temporary solution that does not seem to have any side-effects (yet).

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

@ViewChild('tabs') tabs: IonTabs;

async openTab(tab: string, evt: MouseEvent) {
    const tabSelected = this.tabs.getSelected();
    evt.stopImmediatePropagation();
    evt.preventDefault();
    return tabSelected !== tab
      ? await this.navCtrl.navigateRoot(this.tabs.outlet.tabsPrefix + '/' + tab)
      : this.tabs.select(tab);
}