Untergeordnete Routen in Angular

Es kann vorkommen, dass in einer Komponente, die bereits im Routing verwendet wird, auch untergeordnete Komponenten vorhanden sind. Es ist möglich, dass diese untergeordneten Komponenten ebenfalls über Routing angezeigt werden.

Als Beispiel nehmen wir an, wir haben eine Komponente Aaaa. Wir greifen über die URL /aaaa/ darauf zu. Erstellen wir zwei weitere untergeordnete Komponenten: Chix und Chiy. Wir werden sie innerhalb der Ansicht der Komponente Aaaa anzeigen. Die Komponente Aaaa wird ihr eigenes router-outlet Tag haben, in dem je nach URL entweder die eine oder die andere untergeordnete Komponente angezeigt wird.

Lassen Sie uns das Beschriebene nun implementieren.

Erstellen wir die erste untergeordnete Komponente:

ng generate component chix

Erstellen wir die zweite untergeordnete Komponente:

ng generate component chiy

Schreiben wir separate untergeordnete Routen:

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

Fügen wir sie der Route der Komponente Aaaa als untergeordnete Routen hinzu:

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

Der Pfad aus der Route der übergeordneten Komponente wird der Anfang des Pfads der untergeordneten Komponente sein. Das bedeutet, dass die untergeordneten Komponenten unter den folgenden URLs erreichbar sein werden: /aaaa/chix und /aaaa/chiy.

Lassen Sie uns nun die Komponente Aaaa konfigurieren. Importieren wir das Tag für das Routing:

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

Tragen wir es im Dekorator ein:

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

Fügen wir das Tag in die Ansicht ein:

<p>it works</p>
<router-outlet></router-outlet>

Jetzt kann auf die untergeordneten Komponenten über ihre URLs zugegriffen werden und diese Komponenten werden angezeigt. Versuchen Sie es!

Implementieren Sie die beschriebene Funktionalität der untergeordneten Komponenten.

Erstellen Sie Links, über welche die untergeordneten Komponenten geschaltet werden.