Дочерние маршруты в Angular

Может такое быть, что в компоненте, который уже задействован в роутинге, также есть дочерние компоненты. Можно сделать так, чтобы эти дочерние компоненты также показывались через роутинг.

Для примера пусть у нас есть компонент Aaaa. Мы обращаемся к нему через урл /aaaa/. Сделаем еще два дочерних компонента: Chix и Chiy. Будем их показывать внутри представления компонента Aaaa. У Aaaa будет собственный тег router-outlet, в котором в зависимости от URL будет показываться или один, или второй дочерний компонент.

Итак, давайте реализуем описанное.

Создадим первый дочерний компонент:

terminalng generate component chix

Создадим второй дочерний компонент:

terminalng generate component chiy

Напишем отдельные дочерние маршруты:

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

Добавим их к маршруту компонента Aaaa в качестве дочерних:

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

Путь из маршрута родительского компонента будет началом пути дочернего. Это значит, что дочерние компоненты будут доступны по следующим урлам: /aaaa/chix и /aaaa/chiy.

Давайте теперь настроим компонент Aaaa. Импортируем тег для роутинга:

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

Пропишем его в декораторе:

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

Вставим тег в представление:

app/aaaa/aaaa.component.html<p>it works</p>
<router-outlet></router-outlet>

Теперь можно будет обращаться к дочерним компонентам по их урлам и эти компоненты будут показываться. Попробуйте!