javascript - 将范围从窗口更改为 Angular View

Question

我必须与使用 iframe 的 vendor 集成。 JS 监听 iframe 发出的事件。在我的 Angular component.ts 中，我有:

ngOnInit() {
 let listener = window.addEventListener ? "addEventListener" : "attachEvent";
 let listen = window[listener];
 let messageEvent = listener == "attachEvent" ? "onmessage" : "message";
 listen(messageEvent, function(e) {
  if (e.origin == 'someURL') {
    console.log(e.data)
    this.doStuff(e.data);
  }
}, false);
}

doStuff(data){
 //do stuff
}

问题是，当调用 this.processMessage() 时，我收到错误:

ERROR TypeError: this.processMessage is not a function

我知道这是一个范围问题，因为“this”的范围现在是窗口。处理这种情况的最佳方法是什么？

是

 let that = this 

除了listen()之外，es6可以接受吗？

Answer 1

您不必手动创建中间变量，当您使用箭头函数时，TypeScript 会为您完成此操作:

listen(messageEvent, (e) => {
  if (e.origin == 'someURL') {
    console.log(e.data)
    this.doStuff(e.data);
  }
}, false);

在后台，它通过在编译到不支持箭头函数的目标时创建一个名为 _this 的变量来执行完全相同的操作。