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.

I've discovered that you can provide { skipLocationChange: true } as a second parameter to the navigate command to achieve this, but I'm getting some strange results. Will update further when I figure them out. — Jamie Butler
– Jamie Butler, Commented Mar 23, 2017 at 4:07
Any progress on hiding secondary routes from url on subsequent navigation? — Merdan Gochmuradov
– Merdan Gochmuradov, Commented Apr 6, 2017 at 19:01
No luck unfortunately. I'm still planning to raise it an issue, but I want to build a good set of examples. Unfortunately, this is a spare-time project, and I haven't had a chance to look at if for the last couple weeks. — Jamie Butler
– Jamie Butler, Commented Apr 7, 2017 at 4:12

Tobias · Accepted Answer · 2019-03-22 07:10:57Z

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.

edited Mar 22, 2019 at 7:10

Tobias

9693 gold badges14 silver badges31 bronze badges

answered Mar 22, 2019 at 6:30

Nikhil Nayyar

4095 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stijn Dejongh · Accepted Answer · 2021-12-10 15:24:42Z

I ran in to the thread, while trying to find out to solve a similar issue. Here is how I managed to hide the auxiliary routes from my users. I hope this helps whoever stumbles upon this issue in the future.

My context:

I have two router outlets in a html container. For most routes, the content of the sidebar must be a list with generic information. However, when navigating to the page that already contains this information, I wish to use a default, empty sidebar.

Solution:

Use the routeconfig (routing.module.ts), and declaring both outlets as child routes for the parent.

This results in the url only displaying the 'parent' route, so the auxiliary routes are hidden.

snippet: route with sidebar

{
        path: 'documents',
        children: [
          {
            path: '',
            component: SidebarWithInformation,
            outlet: 'sidebar'
          },
          {
            path: '',
            component: DocumentComponent,
          }
        ],
      },

snippet2: route with sidebar

{
        path: 'full-info',
        children: [
          {
            path: '',
            component: AggregatedInfoComponent,
          },
          {
            path: '',
            component: EmptySidebarComponent,
            outlet: 'sidebar'
          },
        ]
      }

Collectives™ on Stack Overflow

Can I hide Angular 2 Secondary Routes from the URL?

Update

2 Answers 2

Comments

My context:

Solution:

snippet: route with sidebar

snippet2: route with sidebar

Comments

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

Comments

My context:

Solution:

snippet: route with sidebar

snippet2: route with sidebar

Comments

Related