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:

ng generate component chix

Vamos criar o segundo componente filho:

ng generate component chiy

Vamos definir as rotas filhas separadas:

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

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

const 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:

import { RouterOutlet } from '@angular/router';

Vamos registrá-lo no decorator:

@Component({
	......
	imports: [RouterOutlet],
	......
})

Vamos inserir a tag no template:

<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!

Implemente o funcionamento descrito dos componentes filhos.

Crie links para alternar entre os componentes filhos.