修改ActivatedRoute中的数据对象

Question

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

      {
    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

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

Answer 1

路由的 data 属性是静态的，创建后无法修改（来源： https: //angular.io/api/router/Data）。

可能还有很多其他方法可以实现您的目标。:id最常见的方法是从路由中获取参数（我假设这是用户 ID）并将其输入到UserService（您创建的）中，然后返回用户的displayName.

更高级的选项：

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

...
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）添加到路由配置中的数据对象中。然后，我有一个面包屑渲染组件，它订阅路由器的数据参数，提取这些面包屑组件类，并使用它们动态构建面包屑路径。每个单独的面包屑组件都可以做任何它需要做的事情来构建自己的视图。

例如，您可以创建一个UserDisplayNameBreadcrumbComponentin ，ngOnInit()从路由参数中获取当前用户 ID，查找该用户，找到其显示名称，然后呈现它。

实际上，我不久前发布了一个关于此问题的问题（在我一切正常之前），如果您感兴趣的话，可以解释更多：/sf/answers/3060064031/

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