Can I hide Angular 2 secondary routes from URL?

I am using secondary navigation routes in Angular 2 (sometimes called auxiliary routes) to control what is displayed in the left and right sidebars. This seems like the right approach for me, because I want the sidebars to be constant throughout the site, but I also want to be able to change their content from within the components if I need to (by performing additional navigation).

For example, I can add an Edit button on the left sidebar when a user views an article and they are logged in as editor. I could do this by doing some extra navigation in my "ArticleDetailComponent".

However, I don't want the sidebar routing to appear in the URLs. It consoles the implementation details to the user and clutters up what would otherwise be a simple, memorable URL without adding any meaning 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 disabled?


This can be achieved by passing a second object to the navigation command when performing additional navigation such as

    [{ outlets: { 'left-column': ['home'] }}],
    { skipLocationChange: true }


However, there is a flaw in this approach that I have not yet resolved. When the primary navigation happens (no matter how), when the location is changed by the main navigation, the secondary URL is appended to the URL. This might be an issue that I will need to report to the Angular team.


source to share

All Articles