离子选项卡视图在点击选项卡时消失。

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