如何在 ionic 4 的选项卡内创建选项卡？答案

【问题标题】：How to create tabs inside a tab in ionic 4?如何在 ionic 4 的选项卡内创建选项卡？
【发布时间】：2021-05-15 07:36:39
【问题描述】：

我正在使用 ionic 4，我正在尝试使用角度路由在标签内实现标签。

我想要实现的是这样的：

这里底部的选项卡是主选项卡，单击主选项卡的两个选项卡时应看到顶部的一个。

谁能建议我如何实现它？

【问题讨论】：

几年前我也经历过同样的事情。我认为这是不可能的。
@SaurabhGupta 请提供解决您自己问题的答案并将其标记为已接受。

标签： angular angular2-routing ionic4

【解决方案1】：

实现的最佳方法是在一个文件中配置主要路由以保持所有控制。

有些是这样的：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children:[
          {
            path: '',
            loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule),
          },
          {
            path: 'details',
            component: DetailsPage,
            children:[
              {
                path: 'tab1-det1',
                component:Tab1Det1Page
                //loadChildren: () => import('../tab1/details/tab1-det1/tab1-det1.module').then( m => m.Tab1Det1PageModule)
              },
              {
                path: 'tab1-det2',
                loadChildren: () => import('../tab1/details/tab1-det2/tab1-det2.module').then( m => m.Tab1Det2PageModule)
              }
            ]
          }
        ]
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: '',
        redirectTo: 'tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/tab1',
    pathMatch: 'full'
  }
];

在我的情况下 DetailPage 有第二个选项卡，所以请记住，您也需要像组件一样导入 DetailPage

路径：'详细信息'，组件：详细信息页面，孩子们：[ { 路径：'tab1-det1'

在您放置第二个选项卡的选项卡之一中，添加到路由文件然后导入到模块

const routes: Routes = [
   {
     path: '',
    component: Tab1Page,
  },
  {
    path: 'details',
    loadChildren: () => import('./details/details.module').then( m => m.DetailsPageModule)
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Tab1PageRoutingModule {}

其中一个问题（错误 Ionic ）是在第二个选项卡中，参数 tab ='routing' 无法正常工作，而是更改为 (click)="goTo('tabs/tab1/details/tab1- det2')" 到这样的一些方法：

goTo(page){
  this.router.navigate([page]);
}

结果如下：

enter image description here

【讨论】：