Lapsmarsruudid Angularis

Võib juhtuda, et komponendis, mis on juba marsruutimises kasutusel, on ka lapsekomponendid. Saame teha nii, et need lapsekomponendid samuti kuvataks marsruutimise kaudu.

Näiteks olgu meil komponent Aaaa. Me pöördume selle poole URL-i /aaaa/ kaudu. Teeme veel kaks lapsekomponenti: Chix ja Chiy. Kuvame need komponendi Aaaa vaate sees. Aaaa-l on oma silt router-outlet, milles sõltuvalt URL-ist kuvatakse kas üks või teine lapsekomponent.

Nii, teostame kirjeldatu.

Loome esimese lapsekomponendi:

terminalng generate component chix

Loome teise lapsekomponendi:

terminalng generate component chiy

Kirjutame eraldi lapsemarsruudid:

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

Lisame need komponendi Aaaa marsruutile lasteraadena:

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

Vanemkomponendi marsruudi tee on lapse marsruudi tee alguseks. See tähendab, et lapsekomponendid on kättesaadavad järgmiste URL-ide kaudu: /aaaa/chix ja /aaaa/chiy.

Seadistame nüüd komponendi Aaaa. Impordime marsruutimise sildi:

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

Kirjutame selle dekoratuurisse:

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

Lisame sildi vaatusse:

app/aaaa/aaaa.component.html<p>see töötab</p>
<router-outlet></router-outlet>

Nüüd saame pöörduda lapsekomponentide poole nende URL-ide kaudu ja need komponendid kuvatakse. Proovige!