angular2 unset outlets with routerLink

Question

my template looks like this:

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

let's say my url is:

/#/page1(rightpanel:panel)

I want to switch to page2 and remove the auxiliary outlet using the routerLink directive. I have tried the following ways:

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

In both cases, the page is switched to page2, but the rightpanel is still active. The only way I can solve is by putting the following code in the constructor of page2:

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 set the primary outlet rather than just the URL. Personally to me this seems like very odd behaviour, but you can make it work by doing this:

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

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