Rotas Filhas em Angular

Pode acontecer que em um componente que já está envolvido no roteamento, também existam componentes filhos. É possível fazer com que esses componentes filhos também sejam exibidos por meio do roteamento.

Por exemplo, suponha que temos um componente Aaaa. Acessamos ele através da URL /aaaa/. Vamos criar mais dois componentes filhos: Chix e Chiy. Vamos exibi-los dentro do template do componente Aaaa. O Aaaa terá sua própria tag router-outlet, na qual, dependendo da URL, um ou outro componente filho será exibido.

Então, vamos implementar o que foi descrito.

Vamos criar o primeiro componente filho:

terminalng generate component chix

Vamos criar o segundo componente filho:

terminalng generate component chiy

Vamos definir as rotas filhas separadas:

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

Vamos adicioná-las à rota do componente Aaaa como filhos:

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

O caminho da rota do componente pai será o início do caminho do filho. Isso significa que os componentes filhos estarão acessíveis pelos seguintes URLs: /aaaa/chix e /aaaa/chiy.

Agora vamos configurar o componente Aaaa. Vamos importar a tag para o roteamento:

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

Vamos registrá-lo no decorator:

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

Vamos inserir a tag no template:

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

Agora será possível acessar os componentes filhos pelos seus URLs e esses componentes serão exibidos. Experimente!