在打字稿中使用组件类属性的外部JS文件回调

Question

我在我的 Angular 组件中使用了一个外部 js 文件，如下所示：

declare var external: any;

@Component({
  selector: 'payment-form',
  templateUrl: './payment-form.component.html'
})
export class PaymentFormComponent implements AfterViewInit {

  testVar = 'test';

  constructor() {
  }

  ngAfterViewInit(): void {
    external.init({
      'error-callback': this.onExternalError,
      'debug': true
    });
  }
  onExternalError(errors) {
    console.error(errors);
    console.log(this.testVar);
    this.showErrors();
  }

  showErrors() {
    console.log('errors');
  }
}

外部 js 文件有一个名为 init() 的函数，我在 ngAfterViewInit() 中调用它。这个函数接受一个错误回调函数，我给它函数onExternalError。它确实在错误时运行正确的功能，我可以看到console.log(errors)。当我尝试使用组件属性中的testVar 时，问题出现在下一行。它无法访问它并且找不到它，因为它可能使用了不存在 testVar 的错误实例。

this.showErrors 也不起作用，我收到错误 showErrors() is not a function。关于如何解决这个问题的任何想法或者是不可能的？

Answer 1

通过使用() => {}而不是函数回调并使用_this = this修复：

declare var external: any;

@Component({
  selector: 'payment-form',
  templateUrl: './payment-form.component.html'
})
export class PaymentFormComponent implements AfterViewInit {

  testVar = 'test';
  external = external;

  constructor() {
  }

  ngAfterViewInit(): void {
    const _this = this;
    this.external.init({
      'error-callback': (errors) => {
        console.error(errors);
        console.log(_this.testVar);
        _this.showErrors();
      },
      'debug': true
    });
  }
}

Answer 2

尝试获取当前上下文并使用它来调用您的变量：

that = this;
onExternalError(errors) {
    console.error(errors);
    console.log(that.testVar);
    this.showErrors();
  }