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

问题描述

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

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

我正在尝试这样做:

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

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

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

推荐答案

路由的数据属性是静态的，创建后不可修改(来源:https://angular.io/api/router/Data).

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

可能还有许多其他方法可以实现您的目标.最常见的方法是从路由中获取 :id 参数(我假设这是用户 ID)并将其提供给 UserService(您创建的)) 然后返回用户的 displayName.

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.

虽然这对于您的特定用例来说可能有点矫枉过正，但在我的应用程序中，我创建了一个面包屑构建组件，它从路由的数据属性中提取静态面包屑组件并呈现它们.例如，我的路由配置之一如下所示:

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,
      }
    ],
  },
];
...

在我的应用程序中，我将组件类(即ProfileBreadcrumbComponent)添加到我的路由配置中的数据对象.然后我有一个面包屑渲染组件，它订阅路由器的数据参数，提取这些面包屑组件类，并使用它们动态构建面包屑路径.每个单独的面包屑组件都可以做任何它需要做的事情来构建自己的视图.

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.

例如，您可以创建一个 UserDisplayNameBreadcrumbComponent，它在 ngOnInit() 中从路由参数中获取当前用户 ID，查找该用户，找到他们的显示命名，并渲染它.

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.

我实际上在不久前(在我一切正常之前)发布了一个关于此的问题，如果您有兴趣，可以解释更多:https://stackoverflow.com/a/43715200/5490505

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

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

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

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