CODEWITHSUNDEEP
angularangular2-routingrouter-outlet
kyselm
kyselm

Reputation: 310

Angular2 - named router-outlet doesn't navigate to component with child route

I have a parent component with button, function of which is to display child component inside. I am using named router-outlet to navigate to the child. My attempt is based on following example: https://github.com/vsavkin/router_mailapp (showing popup of 'compose')

Routing

...
{
    path: 'commissions-module/agents/:agentId/extra-commissions',
    component: ExtraCommissionsComponent,
    children: [{
        path: 'regeneration-parameters',
        component: RegenerationParametersComponent,
        outlet: 'parameters'
    }]
}
...

As you can see, path of parent component contains variable segment (agentId), therefore I cannot use absolute path routing. Both parent and child components are imported in the module file.

HTML template:

<button (click)="displaySubcomponent()">Show</button>
<router-outlet name="parameters"></router-outlet>

Method for displaying

displaySubcomponent() {
     this.router.navigate(['/', {outlets: {parameters: ['regeneration-parameters']}}])
}

After pushing the button, page responds with

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'regeneration-parameters'

When program tries to navigate to the new url, it is created as: 

.../commissions-module/agents/1000555/extra-commissions(parameters:regeneration-parameters)

what I need is to get following url as the regeneration-parameters is child of extra-commissions:

.../commissions-module/agents/1000555/extra-commissions/(parameters:regeneration-parameters)

Interesting thing is that when I insert the second url into address bar it works great, subcomponent is displayed inside its parent component - the problem is missing slash ("/") before parenthesis in url created by router.navigate() function.

The same thing in example works nicely, so do other solutions for similar troubles I found, is there something hidden that I don't see? Thanks

Upvotes: 4

Views: 4958

Answers (1)

kyselm
kyselm

Reputation: 310

Solution was quite hidden, because when using single router-outlet, usually default one is used instead of named one. The point was, that even though we want to use single named outlet in the app, there also needs to be one default (unnamed) outlet. The template will simply look like:

<button [routerLink]="['./', {outlets: {parameters: 'regeneration-parameters'}}]">
    Show
</button>

<router-outlet></router-outlet>
<router-outlet name="parameters"></router-outlet>

Upvotes: 4

Related Questions