Javascript 使用inside document.addEventListener（）属性时，模型角度不改变

我正在尝试更新我的模型名

此。单击
文档中的.getElementById（'source-selection'）。addEventListener
。不知道为什么在该函数中触发一个简单警报时它不会更改。
我也用
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`;
    });
   }

请在代码中找到指向实验的plunker链接，回调函数中的“this”不是该组件的实例。它已被更改，因为每个新函数都定义了自己的“this”值

解决方案是使用arrow函数自动将“this”绑定到函数：

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

在arrow函数中，使用封闭执行上下文的this值。更多详细信息。
在代码中，回调函数中的“this”不是组件的实例。它已被更改，因为每个新函数都定义了自己的“this”值

解决方案是使用arrow函数自动将“this”绑定到函数：

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

在arrow函数中，使用封闭执行上下文的this值。更多详细信息。
首先，您在非胖箭头函数中使用了
此
。这意味着
此
不是指您的组件，而是指功能

其次，Angular提供了广泛的事件侦听器，为什么要使用vanillaJS呢？这是适得其反的

用这个替换你的html

<div id="source-selection" (click)="changeName()">...</div>

首先，您在非胖箭头函数中使用了
此
。这意味着
此
不是指您的组件，而是指功能

其次，Angular提供了广泛的事件侦听器，为什么要使用vanillaJS呢？这是适得其反的

用这个替换你的html

<div id="source-selection" (click)="changeName()">...</div>

此
内部事件回调不是您所认为的那样因此
此
将不起作用？是否有其他解决方案？将
此
绑定到回调函数，如
函数（）{}.bind（此）
此
内部事件回调不是您所认为的那样所以
此
将不起作用？还有其他解决方案吗？将
此
绑定到回调函数，如
函数（）{}。绑定（此）
谢谢，但我不想使用（单击）我可以知道为什么吗？因为如果你不使用你使用的框架，那么使用框架就没有任何意义！如果不想在标记中使用（单击），可以使用Angular的主机侦听器和绑定。这是另一种“有角度的方法”，而不是使用普通的javascript。鉴于它是用大写字母编写的
框架无关代码
，我非常怀疑您不能使用（单击）。。。但是无论你的船漂浮在什么地方，在这种情况下，请看@ChristianBenseler的回答，他会给你一个解决方案，让它发挥作用！我只想补充最后一件事，
ngochanges
用于输入/输出更改，而不是当前的模型更改，因此如果它不起作用，现在您知道了hwy:）谢谢，但我不想使用（单击）我可以知道为什么吗？因为如果你不使用你使用的框架，那么使用框架就没有任何意义！如果不想在标记中使用（单击），可以使用Angular的主机侦听器和绑定。这是另一种“有角度的方法”，而不是使用普通的javascript。鉴于它是用大写字母编写的
框架无关代码
，我非常怀疑您不能使用（单击）。。。但是无论你的船漂浮在什么地方，在这种情况下，请看@ChristianBenseler的回答，他会给你一个解决方案，让它发挥作用！我只想添加最后一件事，
ngochanges
用于输入/输出更改，而不是当前模型更改，因此如果它不起作用，现在您知道了hwy:）