Konfigurera grundläggande routing i Angular

Låt oss nu konfigurera routing. Låt oss göra så att om URL:en /aaaa/ är inmatad i webbläsarens adressfält, visas den första komponenten, och om /bbbb/ är inmatad, visas den andra.

Denna konfiguration görs i filen app.routes.ts. Först måste vi importera våra komponenter:

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

Och nu måste vi ange vilken URL som motsvarar vilken komponent. För detta behöver vi skapa en speciell array med objekt för routes. I varje objekt kommer det att finnas en nyckel path, där URL:en anges (utan avslutande snedstreck), och en nyckel component, där komponenten som ska visas för denna URL anges:

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

Routingkonfigurationen är dock inte tillräcklig. Vi måste i föräldrakomponenten ange platsen där våra komponenter ska renderas. Detta kommer vi att ta oss an i nästa lektion.