在 Ionic 4 中从一个选项卡移动到另一个选项卡时如何清除嵌套子路由

Question

我正在使用 Ionic 4 应用程序，并且我有特定选项卡的子路由。

我正在尝试，当用户从 tab1 的子路由移动到 tab2 时，当用户来到 tab1 时，它应该打开 tab1 页面而不是 tab1 的子路由。

这是 tabs.router.module.ts:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          },
          {
            path: 'eventdetails',
            loadChildren: '../eventdetails/eventdetails.module#EventdetailsPageModule'
          },
          {
            path: 'progresspage',
            loadChildren: '../myprogress/myprogress.module#MyprogressPageModule'
          }
        ]
      },
     ]
    },
    {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
   }
  ];      

当我从任何选项卡的子路由移动到另一个选项卡时，并且当我移动到该选项卡时，它将打开我移动到另一个选项卡的子路由。

我希望当用户从任何选项卡的子路由移动到另一个选项卡时，当它返回到该选项卡时，它应该打开该选项卡而不是子选项卡。

就像当用户从 tab1>progresspage 移动到 tab2 时，当点击 tab1 时，它应该打开 tab1 页面而不是 Progresspage 页面。

非常感谢任何帮助。

Answer 1

要在 Ionic 4 应用程序中实现所需的行为，您需要修改导航逻辑，以便当用户导航回选项卡时，它始终导航到该选项卡的根目录，而不是子路由。您可以通过使用 NavController 在选择选项卡时以编程方式导航到选项卡的根目录来实现此目的。

以下是实现此目的的方法：

修改 tabs.router.module.ts 以确保路由设置正确。 覆盖选项卡单击行为以重置每个选项卡的导航堆栈。

第 1 步：确保正确的路由配置

您的 tabs.router.module.ts 文件看起来不错，但让我们确保它设置正确：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          },
          {
            path: 'eventdetails',
            loadChildren: () => import('../eventdetails/eventdetails.module').then(m => m.EventdetailsPageModule)
          },
          {
            path: 'progresspage',
            loadChildren: () => import('../myprogress/myprogress.module').then(m => m.MyprogressPageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

第 2 步：覆盖选项卡单击行为

您需要覆盖默认的选项卡单击行为才能导航到选项卡的根目录。您可以通过修改 TabsPage 组件来实现这一点。

1. 修改tabs.page.html以处理选项卡更改事件：

   <ion-tabs (ionTabsDidChange)="onTabChange($event)">
    <ion-tab-bar slot="bottom">
   <ion-tab-button tab="tab1">
     <ion-icon name="triangle"></ion-icon>
     <ion-label>Tab 1</ion-label>
   </ion-tab-button>
   
   <ion-tab-button tab="tab2">
     <ion-icon name="ellipse"></ion-icon>
     <ion-label>Tab 2</ion-label>
   </ion-tab-button>
   

2. 在tabs.page.ts中实现onTabChange方法来导航到选项卡的根目录：

    import { Component } from '@angular/core';
    import { NavController } from '@ionic/angular';
   
    @Component({
     selector: 'app-tabs',
     templateUrl: 'tabs.page.html',
     styleUrls: ['tabs.page.scss']
    })
    export class TabsPage {
   
    constructor(private navCtrl: NavController) {}
   
     onTabChange(event: any) {
     const selectedTab = event.tab;
     // Navigate to the root of the selected tab
     this.navCtrl.navigateRoot(`/tabs/${selectedTab}`);
    }
   }