Question

  constructor() {

    document.addEventListener('someEvent', function(event) {
      console.log(event.data);
      this.test(); //throws error - this.test() is undefined
    });
  }

如果我将其移至ngOnInit，则可以正常使用：

  ngOnInit() {
    this.test(); //works ok
  }

该函数只是组件上的一个方法，在构造函数之后定义：

  public test(){
    console.log('TEST');
  }

我的最终目标是每次test()事件在全局窗口触发时运行我的组件的someEvent方法（事件来自原始javascript，即document.dispatchEvent(event, {'detail': evntPayload});

我如何做到这一点？

Answer 1

使用箭头函数使this指向当前的类实例

  constructor() {

    document.addEventListener('someEvent', (event) => { // <<< changed
      console.log(event.data);
      this.test(); //throws error - this.test() is undefined
    });
  }

Answer 2

以下链接应解决您的需求。只是绑定到不同的事件。

Angular window resize event

Angular 2 - 从Component的构造函数运行组件方法？

2 个答案: