Дочерние маршруты в 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>
Теперь можно будет обращаться к дочерним компонентам по их урлам и эти компоненты будут показываться. Попробуйте!
Реализуйте описанную работу дочерних компонентов.
Сделайте ссылки, по которым будут переключаться дочерние компоненты.