0

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?

1 Resposta 1

0

Como não houve nenhum tipo de resposta e, também não encontrei uma solução plausível na internet, minha solução foi criar um serviço que está relacionado ao component AppComponent e que fica escutando um evento customizado. Esse evento customizado simplesmente dispara o array que a referencia do Router precisa para conseguir fazer o redirect sem sair do angular, assim todo o controle de redirecionamento é feito pelo módulo principal independente do módulo filho que eu usar assim:

Classe RootRouterRedirect.ts

export class RootRouterRedirect {

    public constructor(redirect: string | string[]) {
        const event = new CustomEvent('rootRouterRedirect', { detail: [].concat(redirect) });
        window.dispatchEvent(event);
    }

}

E no meu AppComponent eu anexei um método que faz o listener desse evento, assim:

AppComponent

import { Component, HostListener } from '@angular/core';
... outros imports 
@Component({
    selector: 'app',
    template: `
        <router-outlet></router-outlet>
    `
})
export class AppComponent {

    ... construtores e métodos

    @HostListener('window:rootRouterRedirect', ['$event'])
    private event(e): void {
        this.router.navigate(e.detail);
    }

}

Porque fazer isso?

O Angular 2 permite que se tenha múltiplos arquivos de rotas sendo cada um em cada módulo. Essas rotas podem ter seus redirecionamentos mas, pelo que percebi quando se direciona rotas entre módulos carregados via lazyload como na descrição do problema, a estrutura de rotas não consegue destruir corretamente todos os componentes, mantendo assim trechos, rastros ou em ocasiões a própria rota sem atualizar.

Agora se caso quem fizer a chamada for a rota que trabalha sobre o RouterModule.forRoot(), esse problema não ocorre porque ele é que faz o tratamento principal. Além disso, parece que se o módulo não está carregado (porque ser um módulo lazyload) a sub-estrutura do RouterModule.forChild() que está definida nele ainda não é encontrada, portanto não pode ser referenciada.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .