Angular中如何将ngFor循环数组内的元素ID传递给其他组件

你已经完成了通过路由传递单条id参数的逻辑，后续要获取item完整属性可以参考以下三种常用方案：

额外注意你当前写的*ngFor和[routerLink]代码缺少闭合符号，正确基础写法为：

<div *ngFor="let item of listaPostagens"
  [routerLink]="['/post-detalhado', item.id]">
  <!-- 列表元素内容 -->
</div>

方案1：通过id请求后端接口获取完整数据（生产环境最推荐） #

该方案不会因为页面刷新、分享链接导致数据丢失，是最稳定的实现方式：

• 先在项目中封装数据请求服务，添加单条post查询方法

  // post.service.ts
  import { HttpClient } from '@angular/common/http';
  @Injectable({ providedIn: 'root' })
  export class PostService {
    constructor(private http: HttpClient) {}
    getPostById(id: number) {
      return this.http.get(`你的后端接口地址/${id}`);
    }
  }
  

• 在目标组件中引入服务，拿到id后调用接口拉取完整数据

  // post-detalhado.component.ts
  constructor(private postService: PostService, private route: ActivatedRoute) {}
  ngOnInit() {
    this.idPost = this.route.snapshot.params['id'];
    this.postService.getPostById(this.idPost).subscribe(res => {
      this.currentPost = res; // currentPost即为包含所有属性的目标对象
    })
  }
  

方案2：通过路由state参数直接传递完整对象（适合小数据量场景） #

如果不想发请求，也可以在跳转时直接把整个item存在路由状态中：

• 调整列表页的路由跳转代码，添加state配置

  <div *ngFor="let item of listaPostagens"
    [routerLink]="['/post-detalhado', item.id]"
    [state]="{ fullPost: item }">
  </div>
  

• 目标组件直接从state中读取完整对象

  ngOnInit() {
    this.idPost = this.route.snapshot.params['id'];
    this.currentPost = history.state.fullPost;
  }
  

  注意：该方案在用户手动刷新目标页面时，state数据会丢失，建议搭配方案1做兜底逻辑

方案3：通过公共服务缓存列表数据匹配 #

如果你的应用多个模块需要共享列表数据，也可以把listaPostagens存在公共服务中，目标组件拿到id后直接从缓存中匹配对应item：

• 封装缓存服务

  @Injectable({ providedIn: 'root' })
  export class PostCacheService {
    postList: any[] = [];
  }
  

• 列表页加载完listaPostagens时，赋值给缓存服务：this.postCacheService.postList = listaPostagens
• 目标组件匹配数据

  ngOnInit() {
    this.idPost = this.route.snapshot.params['id'];
    this.currentPost = this.postCacheService.postList.find(item => item.id === this.idPost);
  }
  

内容的提问来源于stack exchange，提问作者Caio Sheperd