时间戳

首页 > 解决方案 > 如何在使用Angular routerLink中的查询字符串传递迭代器中的项目时对其进行序列化？

angular - 如何在使用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>

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

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

标签： angularserializationquery-stringangular-routingrouterlink

解决方案

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

除了这些标准之外，还有其他两种方法可以让您使用查询字符串，并让它变得漂亮。使用JSON.stringifyandJSON.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;
}

推荐阅读