As rotas aux funcionam apenas para o componente raiz?
Estou tendo problemas para configurar rotas auxiliares em componentes filhos, por algum motivo, apenas essas rotas auxiliares funcionam iniciando no componente raiz.
Aqui está a configuração do meu roteador
export const routes: RouterConfig = [
{ path: 'test1', component: Test1Component },
{ path: 'test2', component: Test2Component, outlet: 'aux'},
{ path: 'shell', component: ShellComponent, children: [
{ path: 'department/:id', component: DepartmentDetailComponent },
{ path: 'test3', component: Test3Component, outlet: 'aux2' } ] }
];
Se eu navegar para
http://localhost:3000/shell/department/1(aux:test2)
então a saída é como o esperado, ou seja,Test2Component
é renderizado dentroAppComponent
, junto comShellComponent
eDepartmentDetailComponent
:
As saídas principais são exibidas em azul e as saídas auxiliares em vermelho.
Se, no entanto, eu tentar navegar para
http://localhost:3000/shell/department/1(aux2:test3)
Recebo uma mensagem de erro:
platform-browser.umd.js: 1900 EXCEÇÃO: Erro: Não capturado (por promessa): Erro: Não é possível corresponder a nenhuma rota: 'test3'
router-outlets
são como segue:
app.component.ts (aux: test2)
<div class="app">
<h1>App</h1>
<div class="primary-outlet">
<router-outlet></router-outlet>
</div>
<div class="aux-outlet">
<router-outlet name="aux"></router-outlet>
</div>
</div>
shell.component.ts (aux2: test3)
<div class="component">
<h1>Shell</h1>
<div class="primary-outlet">
<router-outlet></router-outlet>
</div>
<div class="aux-outlet">
<router-outlet name="aux2"></router-outlet>
</div>
</div>
o que estou perdendo?
EDIT: Como sugerido por Arpit Agarwal, navegando para
http://localhost:3000/shell/(department/1(aux2:test3))
faz o truque:
No entanto, dê uma olhada no URL após o carregamento da página. Se eu pressionarF5
agora, estou de volta à estaca zero:
platform-browser.umd.js: 1900 EXCEÇÃO: Erro: Não capturado (por promessa): Erro: Não é possível corresponder a nenhuma rota: 'shell'
EDIT 2: Aqui está olink para o projeto no github.