Детски рутови во 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-а и овие компоненти ќе се прикажуваат. Пробајте!