Konfiguration af basisrouting i Angular

Lad os nu konfigurere routing. Lad os gøre sådan, at hvis URL'en /aaaa/ er indtastet i browserens adresselinje, vises den første komponent, og hvis /bbbb/ er indtastet, vises den anden.

Denne konfiguration foretages i filen app.routes.ts. Til at starte med er det nødvendigt at importere vores komponenter:

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

Og nu er det nødvendigt at angive, hvilken URL der svarer til hvilken komponent. For at gøre dette skal der laves en speciel matrix af objekter med ruter (routes). I hvert objekt vil der være en nøgle path, hvor URL'en angives (uden afsluttende skråstreger), og en nøgle component, hvor komponenten angives, som vises ved denne URL:

app/app.routes.tsexport const routes: Routes = [
  { path: 'aaaa', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

Routing-indstillingerne er dog ikke nok. Det er nødvendigt at angive placeringen i forældrekomponenten, hvor vores komponenter vil blive vist. Dette vil vi tage os af i næste lektion.