我想在带有角度材料的动态选项卡中创建一个动态选项卡答案

【问题标题】：I want to create a dynamic tab in a dynamic tab with angular material我想在带有角度材料的动态选项卡中创建一个动态选项卡
【发布时间】：2020-02-06 09:55:34
【问题描述】：

我是角度材料的新手。

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

有可能吗？

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

会不会是路由问题？

感谢您的帮助

【问题讨论】：

改进您的问题，添加更多信息来解决此问题。你想动态添加（增加）标签吗？
在我的例子中，如果我点击食物标签，我想在下面打开另一个标签，里面有奶酪和鸡肉。标题包括食物和家庭。食物包括奶酪和鸡肉。在 Header 中，我创建了一个包含 Home 和 Food 的动态选项卡。我希望 Food 有一个包含奶酪和鸡肉的动态标签。
知道了！！为此发布了答案，尝试一下并告诉我。

标签： angular routing tabs angular-material

【解决方案1】：

您的路由文件有一些歧义，您已经在 HeaderModule 和 FoodModule 中注册了 FoodComponent 路由而你声明了 FoodComponent, CheeseComponent, ChickenComponent, HomeComponent 两次（在 HeaderModule 和 FoodComponentModule 中） -- 一个组件只能声明一次

我对您的示例代码做了一些更改，请看一下stackblitz example

【讨论】：

感谢您的回答。事实上，我仍然需要处理我的陈述。多亏了你，它更清楚了。我更改了我的代码，它可以工作。

【解决方案2】：

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

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

   //...

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

   //....
export class HeaderModule { }

header.module.ts 中的路由器配置没有原因。因此，您要么懒惰地加载它，要么仅将您在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 的回答强调了其中一些。

【讨论】：

感谢您的评论。下次我在组件语句中会更加小心。我只是想知道是否可以在 header.module.ts 中声明我的所有路由