使用内部 document.addEventListener() 属性时模型的角度不变答案

【问题标题】：Model not changing in angular when using inside document.addEventListener() property使用内部 document.addEventListener() 属性时模型的角度不变
【发布时间】：2017-11-08 22:55:54
【问题描述】：

我正在尝试更新我的模型名称 this.name 在 document.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链接here进行实验

【问题讨论】：

this里面的事件回调不是你想的那样
所以this 不起作用？还有其他解决方案吗？
将this绑定到回调函数，如function () {}.bind(this)

标签： javascript angular document

【解决方案1】：

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

一种解决方案是使用自动将“this”绑定到函数的箭头函数：

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

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

【讨论】：

【解决方案2】：

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

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

用这个替换你的html

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

在你的 TS 中添加这个

changeName() { this.name = 'My Angular Test On Click'; }

【讨论】：

谢谢，但我不想使用（点击）
我可以知道为什么吗？因为如果你不使用你使用的框架，那么根本没有使用框架的意义！
如果你不想在标记中使用 (click)，你可以使用 Angular 的宿主监听器和绑定。这是执行此操作的另一种“角度方式”，而不是使用 vanilla javascript。
鉴于它是用大写字母写的Framework-agnostic Code，我非常怀疑你不能使用（点击）......但无论你的船漂浮在这种情况下，请参阅@ChristianBenseler 的回答，他给出你是让它工作的解决方案！
我只添加最后一件事，ngOnChanges 用于输入/输出更改，而不是当前模型更改，所以如果它不起作用，现在你知道 hwy :)