Angular 我想在具有角度材质的动态选项卡中创建一个动态选项卡

我不熟悉棱角材料

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

有可能吗

我试图重现一个例子：

这可能是一个路由问题吗

---

感谢您的帮助

您的路由文件中存在一些歧义，您已在

HeaderModule

和

FoodModule中注册了
FoodComponent
路由
您声明了
FoodComponent、CheeseComponent、ChickenComponent、HomeComponent两次（在
HeaderModule和
FoodComponentModule），一个组件只能声明一次

我对您的示例代码做了一些更改。如果您决定急切地加载
FoodComponent
，请查看此，如下所述：

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

   //...

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

   //....
export class HeaderModule { }


PS:别忘了导入相关组件+你的代码中还有一些我没有提到的小补丁，@Akhil的回答在其中一些下面划线。
改进你的问题，添加更多信息来解决这个问题。是否要动态添加（增加）选项卡？在我的示例中，如果单击“食物”选项卡，我希望另一个选项卡在下面打开奶酪和鸡肉。标题包括食物和家。食物包括奶酪和鸡肉。在Header中，我创建了一个动态选项卡，其中包括Home和Food。我希望食物有一个动态标签，包括奶酪和鸡肉。明白了！！发布了此问题的答案，请尝试并让我知道。谢谢您的回答。事实上，我仍然需要努力完成我的发言。多亏了你，事情才清楚多了。我改变了我的代码，它工作了。谢谢你的评论。下次在我的组件语句中我会更加小心。我只是想知道是否可以在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 { }