Barneruter i Angular
Det kan hende at i en komponent som allerede er brukt i routing, også finnes barnekomponenter. Man kan gjøre det slik, at disse barnekomponentene også vises gjennom routing.
La oss for eksempel si at vi har en komponent Aaaa.
Vi henviser til den gjennom URL-en /aaaa/.
La oss lage to barnekomponenter til: Chix
og Chiy. Vi vil vise dem inni
visningen av komponenten Aaaa.
Aaaa vil ha sin egen tag
router-outlet, der avhengig
av URL-en vil enten den ene eller
den andre barnekomponenten vises.
Så, la oss implementere det som er beskrevet.
La oss opprette den første barnekomponenten:
ng generate component chix
La oss opprette den andre barnekomponenten:
ng generate component chiy
La oss skrive separate barneruter:
let childRoutes: Routes = [
{ path: 'chix', component: ChixComponent },
{ path: 'chiy', component: ChiyComponent },
];
La oss legge dem til i ruten til komponenten Aaaa
som barn:
const appRoutes: Routes = [
{
path: 'aaaa',
component: AaaaComponent,
children: childRoutes
},
];
Stien fra ruten til foreldrekomponenten
vil være begynnelsen på stien til barnekomponenten. Dette betyr
at barnekomponentene vil være tilgjengelige på
følgende URL-er: /aaaa/chix og
/aaaa/chiy.
La oss nå konfigurere komponenten Aaaa.
Importer taggen for routing:
import { RouterOutlet } from '@angular/router';
La oss skrive den inn i dekoratøren:
@Component({
......
imports: [RouterOutlet],
......
})
La oss sette inn taggen i visningen:
<p>det fungerer</p>
<router-outlet></router-outlet>
Nå vil det være mulig å henvise til barne- komponentene gjennom deres URL-er og disse komponentene vil bli vist. Prøv det!
Implementer den beskrevne funksjonaliteten for barne- komponenter.
Lag lenker som bytter mellom barnekomponentene.
