Olá, estou trabalhando com o Angular onde eu tenho uma estrutura como esta:
|-app
|-fooModule (fooPage1, fooPage2)
|-barModule (barPage1, barPage2)
Esses dois módulos estão sendo carregados usando lazyLoad
no arquivo de rotas como mostra a seguir:
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'bar', loadChildren: './foo/foo.module#FooModule' },
{ path: '' , loadChildren: './bar/bar.module#BarModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
O módulo AppRoutingModule
é carregado no módulo inicial do projeto, o AppModule
juntamente com outros, e tanto em foo quanto em bar a mesma estrutura mas, ao invés de carregar módulos com lazyLoad, eu carrego componentes, assim:
exemplo: foo-routing.module (bar-routing.module.ts tem a mesma estrutura)
import { FooPage1Component } from './foo-page-1/foo-page-1.component';
import { FooPage2Component } from './foo-page-2/foo-page-2.component';
const routes: Routes = [
{ path: 'page2', component: FooPage2Component },
{ path: '' , component: FooPage1Component }
];
Meu problema é que, quando eu estou na rota www.meusite.com/page2 e tento forçar um roteamento para o BarModule, o Angular não remove os componentes já carregados do FooPage2Component. É como se ele nao desse update no <router-outlet>
. A forma que faço a chamada para outro módulo pode ser vista no componente FooPage2Component:
foo-page-2.component
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'foo-page-2',
templateUrl: './foo-page-2.component.html',
styleUrls: ['./foo-page-2.component.scss']
})
export class FooPage2Component {
constructor(
private router:Router
){
// depois de 2 segundos, redirecione para o módulo bar na pagina 2
setTimeout(()=> router.navigate(['../bar/page2']), 2000);
}
}
Quando eu compilo o código acima, e faço o teste, o resultado na minha página ao fazer o redirecionamento fica assim:
estrutura renderizada no navegador
<html>
<head>
</head>
<body>
<app>
<router-outlet></router-outlet>
<foo-page-2></foo-page-2>
<bar-page-2></bar-page-2>
</app>
</body>
</html>
Então aqui vai a pergunta: se eu tenho 2 módulos diferentes que tem suas próprias rotas e são carregados dinamicamente (com lazyLoad no loadChildren) como eu posso dizer ao angular que eu quero, a partir do componente FooPage2 que está no FooModule, redirecionar para um componente BarPage2 no BarModule?
Nota: já tentei usar o Router.navigate, Router.navigateByUrl, já tentei forçar a navegação passando os parâmetros do NavigationExtra.relativeTo e mesmo assim, não funciona. Infelizmente minha solução até o momento está sendo um (horrível)
window.location.href = window.location.href.replace('/page2','/bar/page2)
;
Alguém pode me ajudar?