Angular组件如何感知EventEmitter绑定回调的执行结果

Angular 原生的 EventEmitter.emit() 不会收集事件订阅者的返回值，所以你无法直接通过 emit 的返回值拿到业务逻辑中返回的 Promise 实例，也就没法在组件内部自动等待异步请求完成。要实现自动控制按钮禁用状态、消除重复的loading状态样板代码，有两种低侵入的可行实现：

方案1：通过@Input接收回调函数（推荐，零样板代码） #

直接放弃用@Output传事件的方式，改用输入属性接收外部的异步点击回调，组件内部可以直接拿到回调执行返回的Promise，全程自动管理禁用状态，业务侧不需要写任何loading相关逻辑。

按钮组件实现 #

@Component({
  selector: "debounced-submit-button",
  template: `
    <button (click)="onClick()" [disabled]="disabled">
      <ng-content></ng-content>
    </button>
  `
})
export class DebouncedSubmitButton {
  disabled = false;
  // 接收外部传入的点击回调，要求返回Promise
  @Input() clickHandler: () => Promise<any> = async () => {};
  // 可选：支持配置防抖间隔
  @Input() debounceTime = 300;

  private debounceTimer: number | null = null;

  async onClick() {
    if (this.disabled) return;
    
    // 防抖逻辑
    if (this.debounceTimer) clearTimeout(this.debounceTimer);
    this.debounceTimer = window.setTimeout(async () => {
      this.disabled = true;
      try {
        await this.clickHandler();
      } finally {
        this.disabled = false;
      }
    }, this.debounceTime);
  }
}

业务侧使用方式 #

不需要维护loading变量，直接传入回调引用即可：

<debounced-submit-button [clickHandler]="makeBackendCall">
  提交表单
</debounced-submit-button>

业务组件代码可以删掉所有loading相关的冗余逻辑：

export class ExampleComponent {
  // 如果需要传参，直接包一层箭头函数即可：[clickHandler]="() => makeBackendCall(id, name)"
  makeBackendCall(): Promise<any> {
    return apiService.makeCall()
      .then(result => useResult(result));
  }
}

方案2：保留@Output事件写法，通过事件参数回传Promise #

如果你更习惯Angular原生的事件绑定语法，可以在触发事件时给监听器传入一个回调函数，要求业务侧把异步操作的Promise通过这个回调回传给按钮组件，同样不需要业务侧维护loading状态。

按钮组件实现 #

@Component({
  selector: "debounced-submit-button",
  template: `
    <button (click)="onClick()" [disabled]="disabled">
      <ng-content></ng-content>
    </button>
  `
})
export class DebouncedSubmitButton {
  disabled = false;
  @Output() debounceClick = new EventEmitter<(promise: Promise<any>) => void>();

  async onClick() {
    if (this.disabled) return;
    this.disabled = true;

    try {
      const waitForTask = new Promise<void>((resolve) => {
        // 给事件监听器传入回传Promise的函数
        this.debounceClick.emit((taskPromise: Promise<any>) => resolve(taskPromise));
        // 如果没有绑定任何监听器，直接结束等待
        if (!this.debounceClick.observers.length) resolve();
      });
      await waitForTask;
    } finally {
      this.disabled = false;
    }
  }
}

业务侧使用方式 #

只需要在事件回调里把异步请求的Promise传回组件即可：

<debounced-submit-button (debounceClick)="handleSubmit($event)">
  提交表单
</debounced-submit-button>

export class ExampleComponent {
  handleSubmit(done: (p: Promise<any>) => void) {
    // 把API调用的Promise传给组件即可，不需要自己维护loading
    done(
      apiService.makeCall().then(result => useResult(result))
    );
  }
}

可选扩展 #

• 如果需要支持多监听器场景，可以在组件内部收集所有监听器回传的Promise，用Promise.all等待所有异步任务完成后再恢复按钮可点击状态
• 可以在disabled状态下内置加载中图标、文字提示等效果，进一步减少业务侧的重复代码

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