In Angular2, while I have a named outlet open, how can I navigate to another route AND close the named outlet?

Question

I'm using named outlets to show a sidebar. Works fine:

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

I also have a link which closes the sidebar. Also works fine:

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

Here's the problem. I want to have a third link, which links to a contacts route AND closes the sidebar. I tried doing this:

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

But nothing happens when I click that third link.

How can I navigate to another route and simultaneously remove a named outlet?

Answer 1

It turns out, when closing a named outlet like this, you also have to specify what the primary outlet should be.

So the third link should look like this:

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