在Angular routerLink中使用查询字符串传递时，如何从迭代器序列化项？

我有一个迭代器，其想法是创建一个子视图（用于版本、更平滑的显示等）。链接按预期工作，策略是在加载sub.view组件时获取数据子集。由于法律和财务问题，我们更愿意提供已经加载的数据，并从超级视图而不是从API提供子视图

<div *ngFor="let item of items">
  <a routerLink="{{'feature/subview/'}}"
     [queryParams]="{origin: ...,data:item}">Click me for {{item.name}}</a>
  {{item.this}} and {{item.that}} ...
</div>

单击我查找{{item.name}
{{item.this}}和{{item.that}}。。。

我发现，尽管项目值可供超级组件使用，并按预期呈现，但当路由发生时，查询字符串包含文本[Object Object]，而不是它的实际序列化。如何强制序列化在查询字符串中传递的项

---

或者，我应该使用查询字符串以外的其他方式传递数据吗？传递的数据总是很小，最大值可能是1000个字符，通常低于100个字符，因此使用查询字符串是有意义的，但我愿意使用其他方法，只要不过分。

好的编码标准要求职责分工。这肯定需要一个服务来处理数据的获取和设置。组件应该是哑的，并且应该只接受来自服务、输入或状态管理系统的数据

撇开这些标准不谈，还有两种方法可以让您只使用查询字符串，并让它变得漂亮。使用

JSON.stringify

和

JSON.parse

方法获取和设置查询参数

<a routerLink="feature/subview" [queryParams]="getQueryParams(item)">
  Click me for {{item.name}}
</a>

<a routerLink="feature/subview" [queryParams]="getQueryParams(item)">
  Click me for {{item.name}}
</a>

然后，您可以在其他组件中获取此查询：

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  // ignoring possible obvious undefined errors
  const item = JSON.parse(this.route.snapshot.params.query).query;
}

---

另一种方法是使用

toString（）

方法：

我相信您不再需要在快照中使用

JSON.parse

，但我可能错了

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  const { origin, data } = this.route.snapshot.params;
}

---

为什么不创建一个服务，以便两个组件可以相互通信？使用一个服务进行组件间通信如何？或者，如果项目具有唯一的id，您可以将服务与路由解析器结合使用，以根据路由器参数获取正确的数据。您的路线将类似于

feature/subview/：itemId

@moritzg，这是单向的。我希望不必将数据管理转移到服务中。另外，作为第二个原因，我希望使用该组件以无会话和无状态的方式呈现传递的数据。我知道我也可以将该逻辑构建到服务中，但所有这些都需要一些工作，我希望现在能够找到一个基于序列化到查询字符串的解决方案。@PierreDuc请查看对上述非常类似的建议的注释。@KonradViltersten那么我要说序列化到JSON，然后在接收端再次解析。当我使用原始建议作为替代方法时，看到您提出了一个非常干净、很好的建议来解决所述的确切需求，我几乎感到羞愧，哈哈哈。我会赏赐你的努力，但你比我大，可能不会给一个啮齿动物的坐垫…@KonradViltersten没关系：我很高兴你去服务。在你的情况下，这确实是一条路！很高兴我能帮忙

getQueryParams(item): any {
  return {
    origin: ...,
    data: item,
    toString() {
      return JSON.stringify(this)
    }
  };
}

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  const { origin, data } = this.route.snapshot.params;
}