Angular 9中如何根据不同场景动态切换按钮点击事件

方案1：用函数变量动态绑定（推荐，扩展性强） #

这种方法适合需要切换多个函数的场景，核心是在TS里定义一个变量存储当前要执行的函数，然后根据业务场景给这个变量赋值。

首先修改你的TypeScript代码：

MODAL_BODY = "BODY STRING";
MODAL_TITLE = "Modal Title"; // 这里你之前写的FUNCTION应该是笔误，改成实际的标题文本
currentSubmitFunction: () => void;

// 根据场景设置要调用的提交函数
setSubmitAction(scenario: string) {
  // 用箭头函数包裹，避免this指向问题
  if (scenario === 'needFunction1') {
    this.currentSubmitFunction = () => this.function1();
  } else if (scenario === 'needFunction2') {
    this.currentSubmitFunction = () => this.function2();
  }
}

function1() { 
  console.log("function 1 works");
  // 执行完逻辑后可以关闭模态框
  this.modal.hide();
}

function2() { 
  console.log("function 2 works");
  this.modal.hide();
}

// 举个例子：在某个触发模态框的方法里切换函数
openModalForScenario2() {
  this.setSubmitAction('needFunction2');
  this.modal.show();
}

然后更新模板里的按钮绑定：

<div class="modal-footer">
  <button type="button" (click)="currentSubmitFunction()" class="btn btn-primary">SUBMIT</button>
</div>

方案2：模板内条件判断（适合简单的二选一场景） #

如果只需要在两个函数之间切换，直接在模板里用三元表达式判断更简单：

先在TS里加一个标志变量：

MODAL_BODY = "BODY STRING";
MODAL_TITLE = "Modal Title";
useFunction2 = false; // 控制用哪个函数

// 切换函数的方法
toggleSubmitFunction() {
  this.useFunction2 = !this.useFunction2;
}

然后修改模板按钮：

<div class="modal-footer">
  <button type="button" (click)="useFunction2 ? function2() : function1()" class="btn btn-primary">SUBMIT</button>
</div>

两种方案都能满足你的需求，方案1更灵活，后续如果要加function3、function4也很容易扩展；方案2代码更简洁，适合简单场景。

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