Question

我正在与 ionic 4 一起工作，并且尝试使用角度路线在选项卡内实现选项卡。

我想要实现的是这样的：

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

有人可以建议我如何实现它吗？

Answer 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 {}

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

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

这是结果：

enter image description here

如何在ionic 4中的标签内创建标签？

1 个答案: