Дъщерни маршрути в Angular

Може да се случи, че в компонент, който вече е използван в рутирането, също има дъщерни компоненти. Може да се направи така, че тези дъщерни компоненти също да се показват чрез рутиране.

За пример нека имаме компонент Aaaa. Достъпваме го чрез URL /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
  },
];

Пътят от маршрута на родителския компонент ще бъде началото на пътя на дъщерния. Това означава, че дъщерните компоненти ще бъдат достъпни на следните URL адреси: /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>

Сега вече може да се осъществи достъп до дъщерните компоненти чрез техните URL адреси и тези компоненти ще се показват. Опитайте!