angular 中的动态路线数据

Question

我想知道是否可以动态更改当前路线的数据（使用 angular 6）

我有以下路由配置

 {
    path: 'collections', component: CollectionListComponent, data: {title: "List of collections"},
    children:
      [
        {
          path: ':collectionId', component: CollectionDetailsComponent, data: {title: "Collection details"},
        }
      ]
  }

我有一个 header 组件可以侦听路由事件并检索数据以显示标题。

   this.router.events.pipe(
      filter(e => e instanceof NavigationEnd))
      .forEach(e => {
        if(e instanceof NavigationEnd)
        {

          let r = route.firstChild;
          while(r.firstChild)
          {
            r = r.firstChild;
          }
          this.title= r.snapshot.data['title'];
        }

      });

现在，我不想在 CollectionDetails 组件上显示静态标题，而是想显示动态标题，例如“Collection [collectionName] 详细信息”。

是否可以使用路线数据实现此目的？

我知道我可以使用广播动态的服务来做到这一点header，但我想知道是否有更好的方法。

Answer 1

您可以使用此处描述的解析器：https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

我创建了一个 stackblitz 来展示 https://stackblitz.com/edit/angular-route-data

当您的应用程序变得更大并且您需要在组件之间共享越来越多的数据时，我建议您使用状态管理库，如 ngrx 或 ngxs。我最近从 ngrx 切换到 ngxs 因为它需要更少的样板代码

Answer 2

我为这类事情写了一个库。将数据存储在缓存中并从其他页面访问它。它比 ngrx 更容易使用、推理和设置。看看 ngx-rxcache.

https://github.com/adriandavidbrand/ngx-rxcache

这是一个基于行为主题的轻量级缓存，您只需几行代码就可以用来缓存您的数据，而不是 ngrx 所需的大量样板代码。

这个库是出于对 ngrx 的厌恶而诞生的，在过去几周使用它之后，我相信它已经准备好供其他人开始使用了。

检查一下。

Answer 3

由于您试图使子项的数据动态化，因此您可以将子项延迟绑定到路由器。这里问了一个类似的问题：Modify data object in ActivatedRoute.

我在那里发布了一个 answer，其中讨论了如何将 children 的数组绑定到根组件构造函数中的路由器，在您的情况下是 CollectionListComponent 通过调用 activatedRoute.routeConfig.children = routes;。因为它在构造函数中，所以在路由信息绑定到路由器之前，您可以使用各种选项来处理路由信息。

Answer 4

如果您使用的是 angular 7.2 及更高版本，您可以使用状态动态传递数据对象而无需在 url 中显示。

this.router.navigate(['/some-route'], {state: {data: {...}}});

然后你可以像这样读取状态：

ngOnInit() {
    this.state = this.activatedRoute.paramMap
        .pipe(map(() => window.history.state));}

angular 中的动态路线数据

Dynamic route data in angular

dynamic

page-title

angular-routing

angular