Angular 2+ - 在路由到子组件时传递数据数组

Question

我愿意在路由时传递数组，例如我有以下内容：

<div *ngFor="let info of users">
<div [routerLink]="['/users']" [queryParams]="{userId:info.id}">
</div>

以上代码运行正常，并显示以下网址：

http://example.com/users?userId=302932

但是，我愿意接受以下内容：

<div *ngFor="let info of users">
<div [routerLink]="['/users']" [queryParams]="{userId:info.id, userData:info}">
</div>

我想保留与上面相同的网址：

http://example.com/users?userId=302932

但是将数组info传递给子组件后，我尝试了几种解决方法，但最后我在子组件上得到undefined而我无法发送数组到子组件。

Answer 1

为了实现这一点，你可以使用任何特殊的开箱即用的东西。路由器背后的想法是将某些状态编码到URL中。如果您需要更多数据，则应该获取其他数据。

由于用户可以输入URL（或访问来自其他网站的链接，或将其标记为书签，或通过电子邮件共享），因此页面必须在第一次加载时工作，因此它无法使用依靠叫它的路线。

您要做的是在用户浏览应用时优化流量。在这种情况下，你应该做什么使用服务在导航时将数据存储到缓存（单件服务）中。在要优化的组件中，为组件的初始化注入服务读取值。如果缓存中有某些内容，请使用它。否则将请求发送到服务器以获取数据。

Answer 2

我认为您可以使用以下格式发送数组作为对象，稍后，您可以从该对象获取数组...

 <div   [routerLink]="[ 'path', { array:[1,2,3] } ]" ></div>