Angular2 - named router-outlet does not navigate component with child route

Question

I have a parent component with a button whose function is to display the child component inside. I use named router-outlet to go to the child. My attempt is based on the following example: https://github.com/vsavkin/router_mailapp (shows the 'compose' popup)

Routing

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

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

HTML template:

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

Display method

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

After clicking the button, the page responds

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

When a program tries to navigate to a new URL, it is created as:

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

URL-, - -:

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

, , URL- , , - ( "/" ) ​​url, router.navigate().

, , - , ?

Answer 1

, - , . , , , () . :

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

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