Angular2 target router exit

Question

I have an application with a basic router that is used as the basis for the entire application. then a child exit router, which is used after the user logs in to display any components loaded by clicking on the navigation link that was based on the base router. I want to be able to target the child exit router when the navigation link is clicked in the base template.

When I click on the nav element in the base template, it loads the component into the base router. That makes sense to me. I would like to know how I can click the navigation element in the base template and load the required component loading into the child socket.

I cannot find any information about targeting a named router-exit, as I could do in RC4 (I think it was RC4) when I used to do something like:

[routerLink]="/childroute#secureRouterOutlet"

Here is a really simple plunker that mimics how the settings are currently configured: plunkr

Answer 1

I would like to know how I can click the navigation element in the base template and load the required component download into the child socket of the router.

You can achieve this by including nested routes, you need to set the property childrento Routes. Here is the doc .

Here's how to do it, especially for your use case from plunkr.

src/app.ts , Routes. , Child2Component ChildComponent

export const ROUTES: Routes = [
    { 
        path: '', 
        component: HomeComponent 
    },
    { 
        path: 'child', 
        component: ChildComponent, 
        children : [
            { path: 'child2', component: Child2Component }  
        ]
    },
    { 
        path: 'home',      
        component: HomeComponent 
    }
];

Child2Component,

<a [routerLink]="['/child', 'child2']">Go to Child - Child2</a>

, , ChildComponent Child2Component router-outlet ChildComponent

plunkr

Answer 2

, , , .

<a [routerLink]="['/childroute#secureRouterOutlet']">