CODEWITHSUNDEEP
angularangular2-routing
Jamie Butler
Jamie Butler

Reputation: 395

Can I hide Angular 2 Secondary Routes from the URL?

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.

Upvotes: 7

Views: 1988

Answers (2)

Stijn Dejongh
Stijn Dejongh

Reputation: 167

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'
          },
        ]
      }

Upvotes: 0

Nikhil Nayyar
Nikhil Nayyar

Reputation: 409

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.

Upvotes: 1

Related Questions