# Дочерние маршруты в 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>`

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

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

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

← →
↑