在Angular中如何将点击事件的对应参数传递给绑定的函数

你的模板参数传递写法是正确的，只需要完善TS文件中的btnClicked函数逻辑即可，具体可以按以下步骤操作：

步骤1：优化函数参数类型（可选但推荐，符合TypeScript规范） #

给参数加上明确的类型限定，避免传入非法值：

// 限定参数只能是'approved'/'cancel'两个合法值
btnClicked(action: 'approved' | 'cancel') {
  // 后续逻辑
}

步骤2：编写分支逻辑 #

可以根据自己的业务场景选if...else或者switch分支判断：

方案A：if判断写法（适合分支少的场景） #

btnClicked(action: 'approved' | 'cancel') {
  if (action === 'approved') {
    // 点击通过按钮的逻辑，比如提交审核、更新状态等
    console.log('执行通过操作');
  } else if (action === 'cancel') {
    // 点击取消按钮的逻辑，比如关闭弹窗、清空表单等
    console.log('执行取消操作');
  }
}

方案B：switch写法（适合后续可能扩展更多按钮的场景） #

btnClicked(action: 'approved' | 'cancel') {
  switch(action) {
    case 'approved':
      console.log('执行通过操作');
      break;
    case 'cancel':
      console.log('执行取消操作');
      break;
    default:
      // 可选：处理非法传入的参数
      console.warn('未定义的操作类型', action);
  }
}

额外注意点 #

你当前模板里第二个危险按钮的文本写的也是Approve，建议改成Cancel避免用户混淆：

<button type="submit" class="btn btn-danger" (click)="btnClicked('cancel')">Cancel</button>

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