如何将可选参数传递给typescript中的回调函数

Posted 2021-04-12

我有一个回调函数，它返回一些数据到组件。

export class AppComponent {
  constructor(
    private service: AppService
  ) {
    this.processSomething(true);
    this.processSomething(false);
  }

  private processSomething(isZoom: boolean = false) {
    this.service.handleAsyncResponses(
      this,
      this.processDataReceived
    );
  }

  private processDataReceived(
    attributeValueList: any,
    isZoom?: boolean
  ) {
    console.log("isZoom:", isZoom);
  }
}

我需要从组件发送一些值isZoom参数并在console.log("isZoom:", isZoom)中访问它。现在console.log是未定义的loggin。

一个工作样本在这里：https://stackblitz.com/edit/angular-service-oqkfmf?file=app/app.component.ts

答案

在您的情况下，您需要在本地闭包中包装函数调用：

private processSomething(isZoom: boolean = false) {
    this.service.handleAsyncResponses(
        this, (attributeValueList: any) => {
            this.processDataReceived(attributeValueList, isZoom);
        }
    );
}

changed example

另一答案

我觉得你有点失落。

我可以自由地从未使用的代码中清除stackblitz，并向您展示如何使用回调：you can check it there。

让我们从组件开始：

constructor(
  private service: AppService
) {
  this.processSomething(true);
  this.processSomething(false);
}

private processSomething(isZoom: boolean = false) {
  this.service.handleAsyncResponses(isZoom, this.processDataReceived);
}

private processDataReceived(isZoom: boolean) {
  console.log("isZoom:", isZoom);
}

您不需要将参数定义为可选参数，因为您将isZoom值设为默认值，因此始终定义它。

如您所见，您不需要将完整对象作为参数传递：可以在没有它的情况下调用该函数。

在您的服务中，您剩下的就是

public handleAsyncResponses(zoom: boolean, callback: Function) {
  callback(zoom);
}

只需像在任何其他环境中一样调用该函数。只需使用参数名称重命名this.processDataReceived(zoom)（此处为callback）。

这就是回调的处理方式。