Angular：通过链接参数数组传递路线数据答案

【问题标题】：Angular: Pass route data via link parameters arrayAngular：通过链接参数数组传递路线数据
【发布时间】：2019-01-29 22:13:20
【问题描述】：

在 Angular 中，我可以使用如下数据定义路由：

{
 path: '/user/:id', 
 component: UserComponent, 
 data: {cache: {use: true, class: MyCacheClass}}
}

然后我就可以在我的组件中注入ActivatedRoute 并访问路由数据。

我还可以使用 routerLink 指令链接到模板中的组件，方法是使用链接参数数组，如下所示：

<a [routerLink]="['/user', id]">Profile</a>

如果我想通过模板 routerLink 传递路由数据，我不确定如何。路线数据不是路线的一部分，所以我不能这样做：

<a [routerLink]="['/user', id, 
{cache: {use: true, class: MyCacheClass}}]">
Profile</a>

如果我这样做，Angular 将尝试导航到：

/user/123;cache=[对象]

是否可以通过 routerLink 指令及其链接参数数组传递路由数据，以便我可以从 ActivatedRoute 获取它？

PS：需要明确的是，我并不是在询问如何在 url 本身中对对象进行编码；我在问如何将它传递给 routerLink 以便我可以通过注入 ActivatedRoute 或 ActivatedRouteSnapshot 并获取它们的 data 属性来获取它

【问题讨论】：

【解决方案1】：

是的 - 您可以，但只能使用简单（非嵌套）对象。

<a [routerLink]="['/user', id, 
{cache: true, class: MyCacheClass, cacheId = 723 }]">
Profile</a>

网址

/user/123;cache=true;class=MyCacheClass;cacheId=723

然后使用目标页面上的服务或机制来重新加载整个对象，方法是使用示例中的唯一 ID 或类似的东西。

我建议然后简单地使用 routeData 并使用注入的类，例如 - StoreService，您可以使用 ID 或其他唯一的方式从中检索缓存

由于它将是一个单例，您将能够访问视图之间的数据..而不必弄乱复杂的路由参数。

以后你会发现你需要添加更多的东西，然后这会让分配变得更容易。

【讨论】：

感谢您的建议。我试图传递的不是一个简单的对象，所以它不能表示为 url 参数。它是一个包含对象的对象。我 100% 同意它不应该在路线上。我在问是否可以通过 routerLink 设置路由数据，而不是如何在路由本身中传递对象。服务注入是我的计划 B
老实说.. 服务注入应该是 A 计划 - 它使前进分配更容易。我遇到了类似的问题，也意识到了这一点：D 您可能可以将复杂对象编码为 base64 路由参数......但这非常有限且令人费解。
是的。我现在可以看到了。在 Angular 文档中，他们使用简单的对象。它似乎不支持复杂的对象。 angular.io/api/router/RouterLink - For instance ['/team', teamId, 'user', userName, {details: true}] means that we want to generate a link to /team/11/user/bob;details=true 这意味着使用这种方式的 RouteData 是通过 URL 传递的，而不是在 Router Singleton 中传递，就好像您将从 TypeScript 中使用它一样。一种解决方法是将您的对象序列化为 base64 并在另一端反序列化它..但这不是 KISS
这个;是矩阵参数的语法，有点埋在这里：angular.io/guide/router#heroes-list-optionally-selecting-a-hero
我知道.. 但是使用 THAT 方法会将其放入 URL 中，因为这是它在不使用注入服务的情况下传递数据的方式。这就是我要说的：D 所以再次.. 尝试使用服务注入和更简单的方法

【解决方案2】：

你不能。这违反了 Angular 路由器的设计。

人们使用 NGRX/NGXS/Akita 等状态管理库或自行设计的服务来处理这种模式。

如果您的对象是持久的，我建议您创建一些哈希映射，并在 URL 中对键进行编码。这样，当您从书签等导航时，可以恢复确切的状态。

【讨论】：