Я хочу создать вкладку динамического c в вкладке динамического c с материалом angular

Question

Я новичок в angular материале.

Я пытаюсь создать динамическую c вкладку в динамической c вкладке. В моем примере есть вкладка, которая содержит еду и дом. В Food я хотел бы добавить вкладку, содержащую сыр и курицу.

Возможно ли это сделать?

Я попытался воспроизвести пример: Пример stackblitz

Возможно ли, что это проблема маршрутизации?

Спасибо за помощь

Answer 1

Если вы решили загрузить 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 подчеркнул некоторые из них.

Answer 2

В вашем файле маршрутизации есть некоторая неоднозначность, вы зарегистрированы FoodComponent маршрутизация в обоих HeaderModule и FoodModule И вы заявили FoodComponent, CheeseComponent, ChickenComponent, HomeComponent twise (In HeaderModule и FoodComponentModule) - компонент может быть объявлен только один раз

Я внес несколько изменений в ваш пример кода, пожалуйста посмотрите на этот пример stackblitz