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

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

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

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

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

ng generate component chix

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

ng generate component chiy

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

let childRoutes: Routes = [ { path: 'chix', component: ChixComponent }, { path: 'chiy', component: ChiyComponent }, ];

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

const appRoutes: Routes = [ { path: 'aaaa', component: AaaaComponent, children: childRoutes }, ];

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

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

import { RouterOutlet } from '@angular/router';

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

@Component({ ...... imports: [RouterOutlet], ...... })

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

<p>it works</p> <router-outlet></router-outlet>

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

Реализуйте описанную работу дочерних компонентов.

Сделайте ссылки, по которым будут переключаться дочерние компоненты.