Typescript / Angular 5-如何確保使用功能參數？

Question

我正在用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();
        }
    }

注釋掉的代碼可以很好地工作，但是不必使用匿名函數會很好。 將其綁定到構造函數后，它將處理其他事件。

Answer 1

必須提供event值。 將其設置為handleFinally參數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();
      }
  }
}

Answer 2

您仍然可以將數組函數與函數變量一起使用，如下所示：

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();
      }
  }
}