Angular12向组件传递函数并处理返回值的优雅实现方案咨询

下面给出两种无需手动绑定this的简洁实现方式，都支持子组件内部处理执行结果、控制按钮加载/禁用状态：

方案1：@Output + 回调参数（推荐，符合Angular单向数据流规范） #

该方案完全匹配你期望的调用写法，不需要修改父组件的方法定义习惯，原理是子组件触发事件时将自身的状态控制回调作为参数传递给父组件，父组件业务逻辑执行完成后调用回调通知子组件更新状态。

子组件代码 #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-button',
  template: `
    <button [disabled]="loading" (click)="handleClick()">
      <ng-content></ng-content>
      <span *ngIf="loading">处理中...</span>
    </button>
  `
})
export class MyButtonComponent {
  @Input() showConfirmation = false;
  // 事件接收一个回调函数作为入参
  @Output() action = new EventEmitter<(isSuccess: boolean, result?: any) => void>();
  loading = false;

  handleClick() {
    // 内置确认弹窗逻辑
    if (this.showConfirmation && !window.confirm('确认执行当前操作？')) {
      return;
    }
    this.loading = true;
    // 触发事件时将状态更新回调作为参数传递
    this.action.emit((isSuccess, result) => {
      this.loading = false;
      // 子组件内部统一处理成功/失败逻辑，比如全局提示、日志上报
      if (isSuccess) {
        console.log('操作成功', result);
      } else {
        console.error('操作失败', result);
      }
    });
  }
}

父组件调用方式 #

完全符合你的预期写法，无需任何额外绑定：

<my-button (action)="exampleAction($event)" [showConfirmation]="true">Reload</my-button>

父组件业务方法写法 #

// 入参就是子组件传过来的回调函数
exampleAction(done: (isSuccess: boolean, result?: any) => void) {
  // 执行你的业务逻辑，比如接口请求
  this.http.get('/api/reload-data').subscribe({
    next: (res) => done(true, res), // 执行成功通知子组件
    error: (err) => done(false, err) // 执行失败通知子组件
  })
}

方案2：@Input传异步函数 + 箭头函数自动绑定上下文 #

如果你希望子组件完全接管方法的执行流程，可以采用该方案，只需要将父组件的业务方法定义为箭头函数，就可以自动绑定父组件上下文，不需要手动写.bind(this)。

子组件代码 #

import { Component, Input } from '@angular/core';
import { isObservable, Observable } from 'rxjs';

@Component({
  selector: 'my-button',
  template: `
    <button [disabled]="loading" (click)="handleClick()">
      <ng-content></ng-content>
      <span *ngIf="loading">处理中...</span>
    </button>
  `
})
export class MyButtonComponent {
  @Input() showConfirmation = false;
  // 入参接收返回Observable或Promise的函数
  @Input() action!: () => Observable<any> | Promise<any>;
  loading = false;

  async handleClick() {
    if (this.showConfirmation && !window.confirm('确认执行当前操作？')) {
      return;
    }
    this.loading = true;
    try {
      const actionResult = this.action();
      // 兼容Observable和Promise两种返回类型
      const finalResult = isObservable(actionResult) ? await actionResult.toPromise() : await actionResult;
      // 子组件内部处理成功逻辑
      console.log('操作成功', finalResult);
    } catch (err) {
      // 子组件内部处理失败逻辑
      console.error('操作失败', err);
    } finally {
      this.loading = false;
    }
  }
}

父组件调用方式 #

不需要手动绑定this：

<my-button [action]="exampleAction" [showConfirmation]="true">Reload</my-button>

父组件业务方法写法 #

用箭头函数定义，自动绑定父组件上下文：

// 箭头函数的this固定为父组件实例，传递到子组件执行也不会丢失上下文
exampleAction = () => {
  // 直接返回异步对象即可
  return this.http.get('/api/reload-data');
}

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