Question

我是棱角材料的新手。

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

有可能这样做吗？

我尝试重现一个示例：stackblitz example

是否可能是路由问题？

感谢您的帮助

Answer 1

路由文件中存在一些歧义，您已在 FoodComponent 和 {{1 }} 然后您在 HeaderModule 和 FoodModule 中声明了 FoodComponent, CheeseComponent, ChickenComponent, HomeComponent 的方向-组件可以是声明仅一次

我对您的示例代码进行了一些更改，请看一下此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中进行路由器的配置。因此，您可以懒惰加载它，或仅将在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的回答强调了其中一些。

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

2 个答案: