为什么不直接在Angular中与DOM交互？

Question

我已经读过，为了安全和性能直接与DOM交互是不明智的。避免使用如下语法选择元素。

const itemToManipulate = document.getElementById('example');

因此，我读到的一个不错的解决方法是使用ElementRef指令。 但是，由于紧密耦合，继续发现Angular Documents建议不要这样做，什么是紧密耦合？

Found in documentation here

我决定使用ViewChild，就像这样...

@ViewChild('itemToManipulate') public item: ElementRef<any>; 

这是否会导致我应关注的任何不良行为（在安全/性能方面），是否存在与DOM交互的最佳实践，还是不应该在Angular（6/7）中完成？

谢谢。

Answer 1

Angular使用Lifecycle Hooks确定如何以及何时渲染和更新组件：

  

组件的生命周期由Angular管理。

     

Angular会创建，渲染，创建和渲染其子级，在其数据绑定属性更改时对其进行检查，并在将其从DOM中删除之前将其销毁。

直接DOM访问或操作会破坏这些生命周期挂钩，从而导致整个应用程序出现意外行为。

Tight coupling 意味着组件（不是Angular组件，而是程序或系统的任何部分）之间高度依赖。在角度上下文中，改变组件的状态（例如变量）直接影响其渲染。因此，如果直接使用ElementRef访问DOM元素，则无法在Web worker中运行组件代码（例如，使用多线程）。