在ActivatedRoute中修改数据对象 [英] Modify data object in ActivatedRoute

问题描述

我需要修改当前路径的数据对象中的面包屑值.这是我的路线配置.

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

我正在尝试这样做:

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

但是它不起作用.任何帮助，将不胜感激.谢谢.

解决方案

路由的data属性是静态的，创建后无法修改(来源: https ://stackoverflow.com/a/43715200/5490505

我使用 ngrx/router-store 在我的应用中，这使得订阅给定路线的所有面包屑变得非常容易.

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.

解决方案

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.

这篇关于在ActivatedRoute中修改数据对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！