Redirect a route from one childModule to another childModule with Angular 2 (^ 4.0)

Question

Redirect a route from one childModule to another childModule with Angular 2 (^ 4.0)

Navigation

#1 by (0 votes)

0

Hello, I'm working with Angular where I have a structure like this:

|-app
   |-fooModule (fooPage1, fooPage2)
   |-barModule (barPage1, barPage2)

These two modules are being loaded using lazyLoad in the route file as follows:

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 { }

The AppRoutingModule module is loaded in the initial project module, AppModule together with others, and both foo and bar the same structure, instead of loading modules with lazyLoad, I load components like this:

example: foo-routing.module (bar-routing.module.ts has the same structure)

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 }
];

My problem is that when I'm on the route www.meusite.com/page2 and try to force a route to BarModule, Angular does not remove the already loaded components from FooPage2Component. It's like he does not update on <router-outlet> . The way I call another module can be seen in the FooPage2Component component:

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);
    }
}

When I compile the code above, and do the test, the result on my page when doing the redirection looks like this:

browser rendered structure

<html>
    <head>
    </head>
    <body>
        <app>
             <router-outlet></router-outlet>
             <foo-page-2></foo-page-2>
             <bar-page-2></bar-page-2>
        </app>
    </body>
</html>

So here's the question: if I have 2 different modules that have their own routes and are loaded dynamically (with lazyLoad in loadChildren) how can I tell how angular I want, from the FooPage2 component that is in FooModule, redirect to a BarPage2 component in BarModule?

Note: I've tried using Router.navigate , Router.navigateByUrl , I already tried to force navigation by passing the NavigationExtra.relativeTo and even then, it does not work. Unfortunately my solution so far is being a (horrible) window.location.href = window.location.href.replace('/page2','/bar/page2) ;

Can anyone help me?

angular angular-routes

asked by anonymous 28.09.2017 / 14:13

1 answer

Calculate all distances Message Value error

score 0 · Accepted Answer

As there was no response, and I also did not find a plausible solution on the internet, my solution was to create a service that is related to the component AppComponent and that is listening to a custom event. This custom event simply triggers the array that the Router reference needs to be able to do the redirect without leaving the angle, so all redirection control is done by the parent module's independent child module that I use like this:

RootRouterRedirect.ts Class

export class RootRouterRedirect {

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

}

And in my AppComponent I have attached a method that makes the listener of this event, like this:

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);
    }

}

Why do this?

Angular 2 allows multiple route files to be   each in each module. These routes can have their redirects   but from what I noticed when directing routes between modules   loaded via lazyload as in the description of the problem, the structure   of routes can not properly destroy all components,   thus maintaining stretches, trails or on occasions the route itself without   update.

Now if you call the person who makes the call is the route that works on the    RouterModule.forRoot() , this problem does not occur because it is that   does the main treatment. In addition, it appears that if the module does not   is loaded (because to be a lazyload module) the sub-structure of the    RouterModule.forChild() that is defined in it is not yet   found, so it can not be referenced.