在打字稿中将函数作为参数传递

Question

我正在使用 Ionic/Angular 编码。

我想将一个函数作为参数传递给另一个文件中的函数，但是该函数没有被调用。

alert.service.ts

  showAlertWithAction(header: string, message: string, action: () => void) {
    const alert = this.alertController.create({
      cssClass: 'custom-alert-ok',
      backdropDismiss: false,
      message,
      header,
      buttons: [{
        text: 'Okay',
        handler: () => action()
      }]
    });
    alert.then(createdAlert => createdAlert.present());
  }

函数在另一个文件中被调用：

some.page.ts

this.alertService.showAlertWithAction("Hello!", "Press Okay to close the modal", () => { this.closeModal() })
async closeModal() {
  await this.modalController.dismiss()
}

Answer 1

需要检查的几件事：

closeModal()真的需要async吗？我想象 this.modalController.dismiss() return 是一个承诺，但您似乎不需要该承诺的 return 值中的任何内容（即没有 .then()），因此您的函数看起来像这并仍然关闭你的模态：
```
closeModal(): void {
  this.modalController.dismiss()
}
```

如果实施第 1 点，则 closeModal 成为形状 () => void 的函数。这与您想要传递给 action 参数的形状相同。正确的做法是

this.alertService.showAlertWithAction(
  "Hello!", "Press Okay to close the modal",
  this.closeModal  // Note: Do not include the brackets, this is now a function reference
)

如果您想将一个函数从一个文件传递到另一个文件，通常您希望“使用原始文件中的所有数据”来执行该函数。换句话说，您想保留该功能的“执行上下文”。

例如，this.modalController 可能是一个实例被传入的服务（或其他依赖项） some.page.ts。当您将 closeModal() 传递到另一个文件时，您真正说的是“在我的 some.page.ts 有权访问的 modalController 实例上调用 .dismiss()。

在这种情况下，我们需要额外的步骤将 some.page.ts 的执行上下文绑定到我们的方法，然后再传递它：
```
this.alertService.showAlertWithAction(
  "Hello!", "Press Okay to close the modal",
  this.closeModal.bind(this)
)
```

假设警报组件中的所有逻辑都正确调用按钮上的 handler 方法，传入的方法现在应该触发

在打字稿中将函数作为参数传递

Passing a function as a parameter in typescript

typescript

ionic-framework

angular