單擊選項卡時離子選項卡視圖消失

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