javascript - 使用内部 document.addEventListener() 属性时模型的 Angular 不会改变

Question

我正在尝试在 document.getElementById('source-selection').addEventListener 内点击时更新我的​​模型名称 this.name。不知道为什么当该函数内的简单警报触发时，它不会改变。 我也对 ngOnChanges 进行了相同的尝试。

ngOnInit() {
      document.getElementById('source-selection').addEventListener('click', function (evt: any) {
       alert('test');
       this.name = `My Angular Test On Click`;
    });
   }
    ngOnChanges() {
      document.getElementById('source-selection').addEventListener('click', function (evt: any) {
       alert('test');
       this.name = `My Angular Test On Click`;
    });
   }

请找到骗子链接here进行实验

Answer 1

在您的代码中，回调函数中的“this”不是组件的实例。它已被更改，因为每个新函数都定义了自己的“this”值。

解决方案是使用箭头函数自动将“this”绑定(bind)到函数:

document.getElementById('source-selection').addEventListener('click',  (evt: any) => {
   this.name = `My Angular Test On Click`;
});

在箭头函数中，使用封闭执行上下文的 this 值。更多详情here .