Angular表格行点击事件冲突：复制按钮跳转失效问题

问题概述 #

现有表格每行绑定了navigateto跳转事件，新增复制按钮后，点击按钮会触发行的跳转；同时按钮绑定的toggle函数无法正确跳转到/invoice/create页面。需求是点击按钮时复制该行数据，跳转至发票创建页并自动填充vendorname下拉框、grossamount文本框。

现有代码 #

Component.ts #

toggle(val:any){
  this.editRowid=val;
  alert(val)
  this.route.navigate(('/invoice/create'))!
}

模板代码 #

<tbody>
<tr *ngfor=let item of list.results (click)="navigateto(item.invoiceid)">
<td>{{item.vendorcode}}</td>
<td>{{item.vendorname}}</td>
<td>{{item.totalgrossamount}}</td>
<td>{{item.Status}}</td>
<td>
<button #item.Vendorcode (click)="toggle(item.VendorCode)"/>
</td>
</tr>
</tbody>

解决方案 #

1. 阻止事件冒泡（解决按钮触发行跳转问题） #

点击按钮时，通过$event.stopPropagation()阻止事件向上冒泡到父元素<tr>，避免触发行的点击事件。

2. 修正路由跳转+传递数据（解决跳转失效+填充表单需求） #

• 修正navigate方法的语法错误，同时通过查询参数传递需要填充的表单数据；
• 修复模板中*ngfor的语法（应为*ngFor），移除无效的模板引用变量。

修改后的代码 #

Component.ts

toggle(item: any) {
  // 传递数据到发票创建页面，这里用查询参数示例，也可通过服务传递
  this.route.navigate(['/invoice/create'], {
    queryParams: {
      vendorName: item.vendorname,
      grossAmount: item.totalgrossamount
    }
  });
}

模板代码

<tbody>
  <tr *ngFor="let item of list.results" (click)="navigateto(item.invoiceid)">
    <td>{{item.vendorcode}}</td>
    <td>{{item.vendorname}}</td>
    <td>{{item.totalgrossamount}}</td>
    <td>{{item.Status}}</td>
    <td>
      <button (click)="toggle(item); $event.stopPropagation()">复制</button>
    </td>
  </tr>
</tbody>

后续补充（创建页面填充表单） #

在发票创建页面的组件中，通过ActivatedRoute接收查询参数并填充表单：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    if (params.vendorName) {
      this.vendorName = params.vendorName; // 绑定到下拉框的ngModel
    }
    if (params.grossAmount) {
      this.grossAmount = params.grossAmount; // 绑定到文本框的ngModel
    }
  });
}

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