在两个组件之间传递或共享数据，并在刷新之间持续存在。

Question

我有一个组件product-list，基本上显示了我所有的产品。

<div *ngFor="let product of products">
  <a routerLink="/products/{{ product.url }}" [state]="product">{{ product.name }}</a>
  <p>{{ product.url }}</p>
</div>

这个页面上的每一个产品都应该打开一个product-update组件，在那里我可以查看，更新和删除一个产品。

我尝试使用Angular状态属性将产品列表中的产品信息传递给product-update。这就是我在product-update组件中获取数据的方法。

ngOnInit(): void {
    this.pruduct = window.history.state;
}

我想我可以使用本地存储来解决这个问题，但是我觉得对于这样一个基本的用例，一定有更好的方法。state是我最好的选择吗？

Answer 1

通常在 "后端 "有一个版本的服务，它也接受其中一个元素的id作为输入。您是否可以考虑在产品列表和显示单品的页面之间交换该id，然后在其页面上调用该服务（输入id）？ 类似于 /products/{{id}} 服务。

我想这是最好的管理方式。通过这种方法，你也可以决定在单个产品的显示上添加信息，并在列表页上留下较少的信息。

另一种可能的解决方案是将整个产品列表保存在产品列表中。localStorage 并从该列表中只调用你需要的产品，在单页上。

我没有想到其他的解决方案。