Understøttelsesruter i Angular

Det kan ske, at i en komponent, der allerede er brugt i routing, også er der understøttelseskomponenter. Det er muligt at gøre sådan, at disse understøttelseskomponenter også bliver vist gennem routing.

For eksempel, lad os sige, at vi har en komponent Aaaa. Vi tilgår den via URL'en /aaaa/. Lad os lave to understøttelseskomponenter mere: Chix og Chiy. Vi vil vise dem inde i komponenten Aaaas visning. Aaaa vil have sin egen router-outlet-tag, hvor afhængigt af URL'en enten den ene eller den anden understøttelseskomponent vil blive vist.

Så, lad os implementere det beskrevne.

Lad os oprette den første understøttelseskomponent:

ng generate component chix

Lad os oprette den anden understøttelseskomponent:

ng generate component chiy

Lad os skrive separate understøttelsesruter:

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

Lad os tilføje dem til komponenten Aaaas rute som understøttelser:

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

Stien fra den overordnede komponents rute vil være starten på stien til den understøttende. Det betyder, at de understøttende komponenter vil være tilgængelige via følgende URL'er: /aaaa/chix og /aaaa/chiy.

Lad os nu konfigurere komponenten Aaaa. Importer tagget til routing:

import { RouterOutlet } from '@angular/router';

Lad os skrive det i dekoratoren:

@Component({
	......
	imports: [RouterOutlet],
	......
})

Indsæt tagget i visningen:

<p>det virker</p>
<router-outlet></router-outlet>

Nu vil det være muligt at tilgå de understøttende komponenter via deres URL'er, og disse komponenter vil blive vist. Prøv det!

Implementer den beskrevne funktionalitet for understøttelseskomponenter.

Lav links, som skifter mellem de understøttende komponenter.