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?

Sorry, not that familiar with router outlets, but maybe this could help you: http://stackoverflow.com/questions/38038001/multiple-named-router-outlet-angular-2 — Alex Szabo, Nov 22 '16 at 15:36

score 7 · Accepted Answer · answered Nov 28 '16 at 18:55

7

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>

answered Nov 28 '16 at 18:55

Weblurk

1 Answers1