时间戳

首页 > 解决方案 > 如何使用角度路由将对象传递给组件？

angular - 如何使用角度路由将对象传递给组件？

问题描述

我有一个“家”组件，我在其中迭代我的漫画（漫画是一个对象数组），
如下所示：

<div *ngFor="let manga of mangas">
  <h1> {{ manga.title }} </h1>
  <button routerLink="/manga/{{ manga.title }}"> read the manga </button>
</div>

（它比这更好，但这只是一个例子）
那么，我怎样才能将整个“漫画”对象传递给新路线？
（我不想传递整个数组）

标签： angulartypescripturl-routingangular-router

解决方案

您不应该在路由中传递对象本身，而是传递对象的 ID，然后从某种类型的数据存储中检索对象。

<div *ngFor="let manga of mangas">
  <h1> {{ manga.title }} </h1>
  <button routerLink="/manga/{{ manga.id }}"> 
     read the manga 
  </button>
</div>

本着单页应用程序的精神，您可能希望拥有一个管理漫画集合的漫画服务（存储库）。

推荐阅读