Угловая структура маршрутизации с вложенными дочерними компонентами

Question

Моя Угловая веб-панель имеет разветвление маршрутизации , например:

const routes: Routes = [
  {
    path: 'home', component: HomeComponent, data: { },
    children: [
      { path: '', redirectTo: 'user', pathMatch: 'full' },
      {
        path: 'user', component: UserComponent, data: { },
        children: [
          { path: '', redirectTo: 'products', pathMatch: 'full' },
          { path: 'products', component: ProductsComponent, data: { }, 
            children: [
              { 
                path: ':id', component: ProductDetail, data: { } 
              },
            ]
          }
        ]
      }
    ]
  }
];

HomeComponent e UserComponent всего лишь маршрутизатор-розетка для детей .

ПродуктыКомпонент имеет список продуктов .

ProductDetail компонент не появляется , потому что его отец ProductsComponent не имеет тега "router-outlet" в своем HTML.

Каким образом должна быть структура маршрутизации, чтобы иметь отца со списком продуктов и ребенка с подробным описанием продукта?

Установите оба значения ProductsComponent и ProductDetail как дочерние для UserComponent , чтобы решить проблему, но создайте уродливую структуру в моей крошке ( home> user> list и home> user> detail )

Моя цель - иметь хлебную крошку с хорошей структурой компонентов. Как дома> пользователь> список> подробно.

Answer 1

Я нахожусь на моем телефоне, поэтому простите за любые ошибки форматирования, я отредактирую это позже.

Если я правильно понял, вы сможете достичь желаемого с помощью следующей конфигурации маршрута:

const routes: Routes = [
  {
    path: 'home', component: HomeComponent, data: { },
    children: [
      { path: '', redirectTo: 'user', pathMatch: 'full' },
      {
        path: 'user', component: UserComponent, data: { },
        children: [
          { path: '', redirectTo: 'products', pathMatch: 'full' },
          { path: 'products', component: ProductsComponent, data: { }}, 
{path: 'products/:id', component: ProductDetail, data: { }} 
            ]
          }
        ]
      }
    ]
  }
];

Вам не нужно вкладывать компоненты, чтобы иметь «хороший» маршрут, вы можете создать его в свойстве path.

Более того, если ваш HomeComponent и UserComponent являются просто выходами маршрутизатора, вы, вероятно, можете упростить все до

const routes: Routes = [
    { path: 'home/user/products', component: ProductsComponent, data: { }}, 
    {path: 'home/user/products/:id', component: ProductDetail, data: { }} 
];

А затем добавьте правильное предложение redirectTo.