javascript中的方法＆＃34;属性指令＆＃34;在Angular

Question

我正在学习Angular5。我正在阅读有关Attribute Directeve

的官方文档

特别是，我在回应用户发起的事件一节中读到了这一点：

  

当然，您可以使用标准JavaScript访问DOM并手动附加事件侦听器。这种方法至少有三个问题：    1.您必须正确编写侦听器。    2.代码必须在销毁指令时分离监听器以避免内存泄漏。    3.直接与DOM API交谈并不是最佳实践。

你能用javascript给我一个例子来比较这两种方法吗？

Answer 1

角

// html
<button (click)="onClick()">Click Me</button>

// ts
onClick(){
    // run some code on click
}

原生js

<button id="my-button">Click Me</button>

// js
// attach click event
document.getElementById('my-button').addEventListener('click', onClick);
// remove click event on component destroy
document.getElementById('my-button').removeEventListener('click', onClick);

正如文档所说

1. 在本机js中，您必须获取要绑定事件的元素，然后附加单击侦听器。您可以看到angular将click事件绑定到元素，因为您使用了属性指令。

2. 在本机js中，当组件被销毁时，您必须手动分离/删除事件侦听器以避免任何内存泄漏。 Angular会自动为您执行此操作。

3. Talking to DOM API directly isn't best practice.这是因为angular设置为在其他环境中运行。例如，使用angular universal，您可以在服务器上预呈现代码。在这种情况下，服务器没有窗口对象。因此，直接与DOM API交谈会导致事情中断。