Einrichtung des grundlegenden Routings in Angular

Lassen Sie uns nun das Routing einrichten. Wir sorgen dafür, dass die erste Komponente angezeigt wird, wenn die URL /aaaa/ in die Adressleiste des Browsers eingegeben wird, und die zweite, wenn /bbbb/ eingegeben wird.

Diese Einstellung wird in der Datei app.routes.ts vorgenommen. Zuerst müssen wir unsere Komponenten importieren:

import { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

Und nun muss angegeben werden, welche URL welcher Komponente entspricht. Dazu muss ein spezielles Array von Objekten mit Routes (Routen) erstellt werden. In jedem Objekt gibt es einen Schlüssel path, in dem die URL (ohne abschließende Schrägstriche) festgelegt wird, und einen Schlüssel component, in dem die Komponente angegeben wird, die für diese URL angezeigt wird:

export const routes: Routes = [
	{ path: 'aaaa', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

Die Routing-Einstellungen allein reichen jedoch nicht aus. In der übergeordneten Komponente muss der Platz angegeben werden, an dem unsere Komponenten ausgegeben werden. Damit werden wir uns in der nächsten Lektion beschäftigen.

Richten Sie das Routing in der Datei app.routes.ts ein.