angular - 修改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

路由的数据属性是静态的，创建后无法修改(来源: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)添加到路由配置中的数据对象。然后，我有一个面包屑渲染组件，它订阅路由器的数据参数，提取这些面包屑组件类，并使用它们动态构建面包屑路径。每个单独的面包屑组件都可以执行构建自己的 View 所需的任何操作。

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

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

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