Маршруты-потомки. undefined Маршруты-потомки.

Маршруты-потомки.

Open in new window

Интернет-магазин. Маршруты-потомки.

Допустим у нас детальная информация о продукте буде иметь 3 секции.

  1. Инфо о продукте.

  2. Инфо о поставщике.

  3. Отзывы.

Создадим для этого 3 компонента.

ng g c good/aboutgood --skipTests=true --flat
ng g c good/aboutvendor --skipTests=true --flat
ng g c good/comment --skipTests=true --flat

Т.е. у родительского компонента DetailComponent будет 3 дочерних со своими роутами но внутри родительского.

Мы могли бы добавить прямые роутинги на них но тогда родительский компонент будет проигнорирован.

Поэтому добавим отдельно роутинги.

const goodRoutes = [
  { path: 'about', component: AboutgoodComponent },
  { path: 'vendor', component: AboutvendorComponent },
  { path: 'comment', component: CommentComponent },
  { path: '', redirectTo: 'about' ,pathMatch: 'full'},
]

И включим их в параметр children нужного роутинга родительского компонента.

{ path: ‘detail/:id’, component: DetailComponent, children: goodRoutes },

Шаблон с ссылками будут выглядеть так.

<div>
  <h1>Detail info</h1>
  <nav>
    <a routerLink="about">About product</a> |
    <a routerLink="vendor">About vendor</a> |
    <a routerLink="comment">Comments</a>
  </nav>

  <router-outlet></router-outlet>
</div>

И содержимое будет подгруженно в собственный router-outlet в родительском компоненте.

database

Other topics