angular - Modify data object in ActivatedRoute

Question

I need to modify the breadcrumb value in the data object of my current route. Here is my route configuration.

      {
    path: "users",
    component: UserListComponent,
    children: [
      {
        path: ":id",
        component: UserComponent,
        data: {
          breadcrumb: '<User name here>'
        },
       }
    ],
    data: {
      breadcrumb: 'Users'
    }
  },

I am trying to do this:

        this._route.data = { breadcrumb: this.user.displayName }; //_route is ActivatedRoute

but it doesn't work. Any help would be appreciated. Thanks.

Answer 1

The data property of a route is static and cannot be modified after creation (source: https://angular.io/api/router/Data).

There are probably many other ways to accomplish your goal. The most common method would be to grab the :id param from the route (I'm assuming this is the user id) and feed it into a UserService (which you create) that then returns the user's displayName.

A more advanced option:

While it might be overkill for your particular use case, in my app I created a breadcrumb building component which extracts static breadcrumb components from the route's data properties and renders them. For example, one of my route configs looks like:

...
import { OrganizationBreadcrumbComponent } from './organization-breadcrumb.component'
import { OrganizationMenuComponent } from './organization-menu.component'
import { ProfileBreadcrumbComponent } from './profile/profile-breadcrumb.component'
import { PeopleBreadcrumbComponent } from './people/people-breadcrumb.component'

const routes: Routes = [
  {
    path: 'organization/:organizationId',
    data: {
      breadcrumb: OrganizationBreadcrumbComponent,
      menu: OrganizationMenuComponent,
    },
    canActivate: [OrganizationGuard],
    children: [
      {
        path: 'profile',
        data: {
          breadcrumb: ProfileBreadcrumbComponent,
        },
        component: ProfileComponent,
      },
      {
        path: 'people',
        data: {
          breadcrumb: PeopleBreadcrumbComponent,
        },
        component: PeopleComponent,
      }
    ],
  },
];
...

In my app, I add component classes (i.e. ProfileBreadcrumbComponent) to the data objects in my route config. I then have a breadcrumb rendering component which subscribes to the router's data param, extracts these breadcrumb component classes, and dynamically builds the breadcrumb trail using them. Each individual breadcrumb component can do whatever it needs to do to build its own view.

For example, you could create a UserDisplayNameBreadcrumbComponent which, in ngOnInit(), grabs the current user id from the route params, looks up that user, finds their display name, and renders it.

I actually posted a question about this a while ago (before I got everything working) that explains more, if you are interested: https://stackoverflow.com/a/43715200/5490505

I use ngrx/router-store in my app which makes subscribing to all the breadcrumbs for a given route pretty easy.