Can I hide Angular 2 Secondary Routes from the URL?

Question

I am using secondary navigation routes in Angular 2 (sometimes known as Auxiliary routes) to manage what is being displayed in my left and right sidebars. This seems like the right approach for me, because I want the sidebars to be persistent throughout the site, but I also want to be able to change their contents from within components if I need to (by performing secondary navigation).

For example, I might want to add an "Edit" button on the left sidebar when the user is viewing an article and they are logged in as an editor. I could do this by performing secondary navigation in my "ArticleDetailComponent".

However, I don't want the routing for the sidebars to appear in the URL. It leaks implementation detail to the user, and clutters what would otherwise be simple, memorable URLs, while adding no value to the user.

So, how do I hide secondary routes from the URL? Or am I asking the wrong question, and my approach to this is fundamentally off somehow?

Update

This can be achieved by passing a second object to the navigate command when performing secondary navigation, e.g.

this._router.navigate(
    [{ outlets: { 'left-column': ['home'] }}],
    { skipLocationChange: true }
);

However, there is a flaw with this approach that I haven't solved yet. When primary navigation occurs (regardless of how), when the location is changed by the primary navigation, the secondary route is added to the URL. This may be an issue that I'll need to report to the Angular team.

Answer 1

Use a link instead, it works fine.

<a [skipLocationChange]='true' [routerLink]="[{ outlets: { 'left-column': ['home'] }}]">Label</a>

See http://dynamo-t.firebaseapp.com
Currently, the app is in build stage.