Question

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

我有以下路线配置

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

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

   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组件上显示静态标题，而是要显示动态标题，例如＆＃34;收集[collectionName]详细信息＆＃34;。

是否可以使用路线数据实现这一目标？

我知道我可以使用广播动态标题的服务来实现，但我想知道是否有更好的方法

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));}

角度动态路线数据

4 个答案: