Angular组件间传值：点击产品跳转详情页如何传递对应ID？

问题修复与实现方案 #

你遇到的核心问题有两个：Angular事件绑定语法错误，以及兄弟组件传值的方案选择，以下是可直接落地的实现方法：

1. 先修正你现有代码的语法错误

Angular的点击事件绑定关键字是(click)而非(onclick)，且事件绑定的表达式中直接引用变量即可，不需要加{{}}插值符，你原来的按钮写法可以直接修正。

2. 两种实现传值的方案

方案一：路由带参数传值（更推荐，支持页面刷新、链接分享）

这种方案是前端单页应用的主流实现方式，不会因为刷新页面丢失数据：

• 第一步：配置路由参数
  在app-routing.module.ts中给详情页路由添加id参数：

const routes: Routes = [
  // 其他已有路由
  { path: 'view-product/:id', component: ViewProductComponent }
];

• 第二步：修改列表页按钮代码
  直接把产品id拼到路由参数中，不需要额外绑定点击事件：

<a class="btn btn-primary" id="veziprodus" [routerLink]="['/view-product', product.Id]" routerLinkActive="link-active">Vezi produs</a>

• 第三步：在详情组件中获取参数并拉取数据
  首先在api.service.ts中新增获取单个产品的接口方法：

getProductById(id: number) {
  return this.http.get(this.baseUrl + `/Product/GetById/${id}`, { headers: this.header });
}

然后在详情组件中注入路由服务拿参数，调用接口拿详情：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute, private api: ApiService) {}

ngOnInit() {
  const productId = Number(this.route.snapshot.paramMap.get('id'));
  this.api.getProductById(productId).subscribe(res => {
    this.productDetail = res;
  })
}

之后你就可以在详情页的HTML中渲染productDetail的字段即可。

方案二：服务存储共享变量（你最初的思路，可行）

这种方案实现简单，适合不需要支持详情页刷新的场景：

• 第一步：在api.service.ts中声明共享变量

// 建议提前定义Product接口规范类型，这里先用any做示例
public currentProduct: any;

• 第二步：修改列表页按钮绑定点击事件

<a class="btn btn-primary" id="veziprodus" (click)="saveCurrentProduct(product)" [routerLink]="['/view-product']" routerLinkActive="link-active">Vezi produs</a>

在列表组件的ts文件中添加对应的方法：

saveCurrentProduct(product: any) {
  this.api.currentProduct = product;
}

• 第三步：在详情组件中直接读取服务变量

ngOnInit() {
  this.productDetail = this.api.currentProduct;
}

注意该方案的缺点：用户如果刷新详情页，服务中存储的变量会被清空，数据会丢失。

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