In Angular2, while I have a named socket open, how can I go to another route And close the named socket?

Question

I use named outputs to display the sidebar. Works great:

<a [routerLink]="['/', {outlets: {sidebar: 'profile'}}]">
    Open sidebar
</a>

I also have a link that closes the sidebar. Also works great:

<a [routerLink]="['/', {outlets: {sidebar: null}}]">
    Close
</a>

Here is the problem. I want to have a third link that links to the contact route and closes the sidebar. I tried to do this:

<a [routerLink]="['/contacts', {outlets: {sidebar: null}}]">
   Contacts
</a>

But nothing happens when I click this third link.

How can I go to a different route and delete a named outlet at the same time?

Answer 1

It turns out that when you close the named network, you also need to specify what should be the main output.

, :

<a [routerLink]="['/', {outlets: {sidebar: null}, {primary: 'contacts'}}]">
   Contacts
</a>