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

Question

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

我创建了一个名为 "entertainment" 的页面，并在其中的娱乐文件夹中创建了另外两个名为 "monthly" 和 "special" 的页面。 仅供参考，文件夹结构如下所示。

娱乐
- 每月
- 特别

娱乐页面的路由如下。

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)
      },
    ]
  }

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

ionic tab view gone when clicking on a tab

tabs

angular

ionic4