Angular2 disconnect sockets with routerLink

Question

my template is as follows:

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

let's say my url:

 /#/page1(rightpanel:panel) 

I want to go to page2 and remove the auxiliary socket using the routerLink directive. I tried the following methods:

 [routerLink]="['/page2', {outlets: {rightpanel: null}} [routerLink]="['/page2', {outlets: {}} 

In both cases, the page switches to rightpanel , but the rightpanel is still active. The only way I can decide is to put the following code in page constructor2:

 this.router.navigate([{outlets: {rightpanel: null}}]); 

which is not a good solution for many reasons.

Using angular 2.4.3, router 3.4.3

Answer 1

You need to install the main outlet, not just the URL. To me, this seems like a very strange behavior, but you can make it work by doing this:

 [routerLink]="[{outlets: { primary: 'page2', rightpanel: null }}]" 

According to the documentation, primary is the name of an unnamed outlet.