Rrugët Fëmijë në Angular

Mund të ndodhë që në një komponent që tashmë përdoret në routing, të ketë gjithashtu komponentë fëmijë. Mund të bëhet që këta komponentë fëmijë gjithashtu të shfahen përmes routing-ut.

Për shembull, le të themi se kemi komponentin Aaaa. Ne i qasemi atij përmes URL-së /aaaa/. Le të bëjmë dy komponentë fëmijë të tjerë: Chix dhe Chiy. Do t'i shfaqim brenda pamjes së komponentit Aaaa. Aaaa do të ketë tag-in e vet router-outlet, në të cilin në varësi të URL-së do të shfaqet ose njëri, ose komponenti tjetër fëmijë.

Pra, le të implementojmë atë që u përshkrua.

Le të krijojmë komponentin e parë fëmijë:

terminalng generate component chix

Le të krijojmë komponentin e dytë fëmijë:

terminalng generate component chiy

Le të shkruajmë rrugët e veçanta fëmijë:

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

Le t'i shtojmë ato në rrugën e komponentit Aaaa si fëmijë:

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

Rruga nga rruga e komponentit prind do të jetë fillimi i rrugës së fëmijës. Kjo do të thotë që komponentët fëmijë do të jenë të disponueshëm përmes URL-ve të mëposhtme: /aaaa/chix dhe /aaaa/chiy.

Tani le ta konfigurojmë komponentin Aaaa. Le të importojmë tag-un për routing:

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

Le ta deklarojmë atë në dekorator:

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

Le të vendosim tag-un në pamje:

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

Tani do të jetë e mundur t'u qaset komponentëve fëmijë përmes URL-ve të tyre dhe këta komponentë do të shfahen. Provojeni!