Apakšmaršruti Angular

Var gadīties, ka komponentā, kurš jau tiek izmantots maršrutēšanā, atrodas arī apakškomponenti. Var izveidot tā, lai šie apakškomponenti tiktu rādīti arī caur maršrutēšanu.

Piemēram, pieņemsim, ka mums ir komponents Aaaa. Mēs piekļūstam tam caur URL /aaaa/. Izveidosim vēl divus apakškomponentus: Chix un Chiy. Mēs tos rādīsim Aaaa komponenta ietvaros. Aaaa būs savs router-outlet atribūts, kurā atkarībā no URL tiks rādīts vai nu pirmais, vai otrais apakškomponents.

Tātad, īstenosim aprakstīto.

Izveidosim pirmo apakškomponentu:

terminalng generate component chix

Izveidosim otro apakškomponentu:

terminalng generate component chiy

Uzrakstīsim atsevišķus apakšmaršrutus:

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

Pievienosim tos Aaaa komponenta maršrutam kā apakšējos:

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

Virsmaršruta ceļš būs apakšmaršruta ceļa sākums. Tas nozīmē, ka apakškomponenti būs pieejami šādos URL: /aaaa/chix un /aaaa/chiy.

Tagad konfigurēsim Aaaa komponentu. Importēsim maršrutēšanas atribūtu:

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

Norādīsim to dekoratorā:

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

Ievietosim atribūtu skatā:

app/aaaa/aaaa.component.html<p>it works</p>
<router-outlet></router-outlet>

Tagad varēs piekļūt apakškomponentiem caur to URL un šie komponenti tiks rādīti. Izmēģiniet!