我想在 angular material 的动态选项卡中创建一个动态选项卡

Question

我是 angular material 的新手。

我正在尝试在动态选项卡中创建动态选项卡。在我的示例中，有一个包含 Food 和 Home 的选项卡。在食物中，我希望能够添加一个包含奶酪和鸡肉的选项卡。

可以吗？

我试图重现一个例子：stackblitz example

会不会是路由问题？

感谢您的帮助

Answer 1

你的路由文件有些歧义，你已经在Both HeaderModule[=28=中注册了FoodComponent路由] 和 FoodModule 你声明 FoodComponent, CheeseComponent, ChickenComponent, HomeComponent twise（在 HeaderModule 和 FoodComponentModule) -- 一个组件只能声明一次

我对您的示例代码做了一些改动，请看看这个 stackblitz example

Answer 2

如果您决定加载 FoodComponent 急切地 如下所述：

  @NgModule({
  imports: [ CommonModule, MatTabsModule, RouterModule.forChild([

   //...

      { path: 'food', component: FoodComponent, data: { label: 'Food' } }, //<-- this 

   //....
export class HeaderModule { }

header.module.ts中的路由器配置没有原因。因此，要么你加载它 lazily 要么只是将你在 food.module.ts 中配置的内容带到 header.module.ts 中：

    @NgModule({
  imports: [ CommonModule, MatTabsModule, RouterModule.forChild([
    { path: '', component: HeaderComponent, children: [
      { path: '', redirectTo: 'home' },
      { path: 'home', component: HomeComponent, data: { label: 'Home' } },
      { path: 'food', component: FoodComponent, data: { label: 'Food' }, children: [

         { path: '', redirectTo: 'cheese' },
         { path: 'cheese', component: CheeseComponent, data: { label: 'Cheese' } },
         { path: 'chicken', component: ChickenComponent, data: { label: 'Chicken' } },

       ] }
    ] }
  ]) ],
  declarations: [ HeaderComponent, HomeComponent, FoodComponent, CheeseComponent, ChickenComponent ]
})
export class HeaderModule { }

PS: 不要忘记导入相关组件+我在你的代码中做了一些其他的小修复没有提到它们，@Akhil 的回答强调了其中的一些。

我想在 angular material 的动态选项卡中创建一个动态选项卡

I want to create a dynamic tab in a dynamic tab with angular material

tabs

routing

angular-material

angular