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

Question

我有一个迭代器，我的想法是创建一个子视图（用于版本、更流畅的显示等）。链接按预期工作，策略是在加载 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 值可用于超级组件并按预期呈现，但是当路由发生时，查询字符串包含文本 [Object object] 而不是它的实际序列化。如何强制序列化在查询字符串中传递的 item？

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

Answer 1

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

撇开这些标准不谈，还有两种其他方法可以让您使用查询字符串并使其美观。使用 JSON.stringify 和 JSON.parse 方法获取和设置 queryParams。

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

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

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

constructor(private route: ActivatedRoute) {}

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

另一种方法是使用 toString() 方法：

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

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

我相信您不再需要使用 JSON.parse 作为您的快照，但我可能是错的

constructor(private route: ActivatedRoute) {}

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

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

How to serialize an item from an iterator when passing it using query string in Angular routerLink?

serialization

query-string

angular-routing

routerlink

angular