单击选项卡时离子选项卡视图消失

Question

我搜索了解决方案，但在这种情况下没有找到任何匹配项。

我创建了一个名为“娱乐”的页面，在该页面中，我在娱乐文件夹中创建了另外两个页面，分别称为“每月”和“特殊”。 仅供参考，文件夹结构看起来像这样。

• 娱乐
  • 每月
  • 特别的

娱乐页面的路线如下所示。

const routes: Routes = [
  {
    path: '',
    component: EntertainmentPage
  },
  {
    path: 'monthly',
    loadChildren: () => import('./monthly/monthly.module').then( m => m.MonthlyPageModule)
  },
  {
    path: 'special',
    loadChildren: () => import('./special/special.module').then( m => m.SpecialPageModule)
  }
];

选项卡视图也如下所示。

  <ion-tabs >
    <ion-tab-bar slot="bottom" style="width: 100% !important;">
      <ion-tab-button tab = 'monthly'>
        <ion-icon name="fast-food"></ion-icon>
        <ion-label>Food</ion-label>
      </ion-tab-button>

      <ion-tab-button tab = 'special'>
        <ion-icon name="beer"></ion-icon>
        <ion-label>Alcohol</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

但是，当我单击给定选项卡时，页面已加载，并且不存在的选项卡消失了。 请对此提出任何建议。 提前致谢。

Answer 1

在@Mostafa的帮助下找到了解决方案

所以我刚刚错过的是，将每个选项卡路由添加为子路由。

  {
    path: '',
    component: EntertainmentPage,
    children:[
      {
        path: '',
        redirectTo: 'monthly',
        pathMatch: 'full'
      },
      {
        path: 'monthly',
        loadChildren: () => import('./monthly/monthly.module').then( m => m.MonthlyPageModule)
      },
      {
        path: 'special',
        loadChildren: () => import('./special/special.module').then( m => m.SpecialPageModule)
      },
    ]
  }