我想在带有角材料的动态标签中创建动态标签

Question

我是棱角材料的新手。

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

可以这样做吗？

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

是否可能是路由问题？

谢谢您的帮助

Answer 1

您的路由文件中存在一些歧义，您已经在FoodComponent和HeaderModule中都注册了[[FoodModule路由并且您在FoodComponent, CheeseComponent, ChickenComponent, HomeComponent twise中声明了（在HeaderModule和FoodComponentModule中）–可以将一个组件声明为仅一次

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

Answer 2

如果您决定加载FoodComponent

eagerly，如此处所述：

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