Rutele copil în Angular

Se poate întâmpla ca într-un component care este deja utilizat în rutare, să existe și componente copil. Putem face astfel încât aceste componente copil să fie de asemenea afișate prin rutare.

De exemplu, să presupunem că avem componentul Aaaa. Accesăm la el prin URL-ul /aaaa/. Să mai creăm două componente copil: Chix și Chiy. Le vom afișa în interiorul reprezentării componentei Aaaa. Aaaa va avea propriul său tag router-outlet, în care, în funcție de URL, va fi afișat fie unul, fie celălalt component copil.

Deci, să implementăm cele descrise.

Să creăm primul component copil:

terminalng generate component chix

Să creăm al doilea component copil:

terminalng generate component chiy

Să scriem rute separate pentru copii:

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

Să le adăugăm la ruta componentei Aaaa ca fiind copii:

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

Calea din ruta componentei părinte va fi începutul căii pentru copil. Aceasta înseamnă că componentele copil vor fi accesibile la următoarele URL-uri: /aaaa/chix și /aaaa/chiy.

Acum să configurăm componentul Aaaa. Să importăm tag-ul pentru rutare:

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

Să îl specificăm în decorator:

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

Să inserăm tag-ul în reprezentare:

app/aaaa/aaaa.component.html<p>funcționează</p>
<router-outlet></router-outlet>

Acum se va putea accesa la componentele copil prin URL-urile lor și aceste componente vor fi afișate. Încercați!