Typescript/Angular 5 - 如何确保正在使用函数参数？答案

【问题标题】：Typescript/Angular 5 - how to make sure function parameter is being used?Typescript/Angular 5 - 如何确保正在使用函数参数？
【发布时间】：2019-02-02 04:36:54
【问题描述】：

我正在用 Angular 5 和 Ionic 4 编写一个组件。

我想传入一个 Refresher 事件，以便在用户刷新时隐藏刷新微调器，finally 函数可以隐藏微调器。

这是我的代码：

export class UserInfoService {

    constructor(private employeeService: EmployeeService) {
        this.handleSuccess = this.handleSuccess.bind(this);
        this.processData = this.processData.bind(this);
        this.handleFinally = this.handleFinally.bind(this);
    }

    getEmployeeInfo(event?: Refresher) {

        // console.log(event);

        return this.employeeService
            .getEmployeeInfo()
            .map(this.handleSuccess)
            .finally(this.handleFinally);
            // .finally(() => {
            //     if (event != null) {
            //         console.log(' event ', event);
            //         event.complete();
            //     }
            // });
    }

    handleFinally() {
        console.log(' handle finally ', event);

        if (event != null) {
            console.log(' event ', event);
            event.complete();
        }
    }

注释掉的代码可以正常工作，但不必使用匿名函数会很棒。将其绑定到构造函数后，它会接收其他事件。

【问题讨论】：

标签： angular typescript binding this

【解决方案1】：

您仍然可以使用带有函数变量的数组函数，如下所示：

export class UserInfoService {

  constructor(private employeeService: EmployeeService) {
      this.handleSuccess = this.handleSuccess.bind(this);
      this.processData = this.processData.bind(this);
  }

  getEmployeeInfo(event?: Refresher) {

      // console.log(event);

      return this.employeeService
          .getEmployeeInfo()
          .map(this.handleSuccess)
          .finally(this.handleFinally);

  }

  handleFinally = (event?: Refresher) => {
      console.log(' handle finally ', event);

      if (event != null) {
          console.log(' event ', event);
          event.complete();
      }
  }
}

【讨论】：

event 仍未提供。
我忘记添加参数了。

【解决方案2】：

必须提供event 值。让它成为handleFinally 的参数怎么样？仍然需要一个匿名函数，但它现在更短了，这不会降低可读性：

export class UserInfoService {
  constructor(private readonly employeeService: EmployeeService) {
      this.handleSuccess = this.handleSuccess.bind(this);
      this.processData = this.processData.bind(this);
  }

  getEmployeeInfo(event?: Refresher) {
      // console.log(event);

      return this.employeeService
          .getEmployeeInfo()
          .map(this.handleSuccess)
          .finally(() => this.handleFinally(event));

  }

  handleFinally(event?: Refresher) {
      console.log(' handle finally ', event);

      if (event) {
          console.log(' event ', event);
          event.complete();
      }
  }
}

【讨论】：