Barnrutter i Angular

Det kan hända att i en komponent som redan används i routing, finns det också barnkomponenter. Man kan göra så att dessa barnkomponenter också visas via routing.

Som ett exempel, låt oss säga att vi har en komponent Aaaa. Vi kommer åt den via URL:en /aaaa/. Låt oss skapa ytterligare två barnkomponenter: Chix och Chiy. Vi kommer att visa dem inuti komponenten Aaaas vy. Aaaa kommer att ha en egen tagg router-outlet, där beroende på URL:en antingen den ena eller den andra barnkomponenten kommer att visas.

Så, låt oss implementera det som beskrivits.

Låt oss skapa den första barnkomponenten:

terminalng generate component chix

Låt oss skapa den andra barnkomponenten:

terminalng generate component chiy

Låt oss skriva separata barnrutter:

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

Låt oss lägga till dem till komponenten Aaaas rutt som barn:

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

Vägen från den föräldrakomponentens rutt kommer att vara början på barnets väg. Det betyder att barnkomponenterna kommer att vara tillgängliga på följande URL:ar: /aaaa/chix och /aaaa/chiy.

Låt oss nu konfigurera komponenten Aaaa. Importera taggen för routing:

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

Låt oss skriva in den i dekoratören:

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

Låt oss sätta in taggen i vyn:

app/aaaa/aaaa.component.html<p>det fungerar</p>
<router-outlet></router-outlet>

Nu kommer det att vara möjligt att komma åt barn- komponenterna via deras URL:ar och dessa komponenter kommer att visas. Prova!