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

Question

我读到，无论是出于安全性还是性能考虑，直接与 DOM 交互都是不明智的。避免使用如下语法来选择元素。

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

所以我读到一个很好的解决方法是使用 ElementRef Directive。但是继续下去发现Angular Documents建议不要这样做，因为紧耦合，什么是紧耦合？

在此处的文档中找到

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

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

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

提前致谢。

Answer 1

Angular 使用Lifecycle Hooks来确定组件的渲染和更新方式和时间：

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

Angular 创建它、渲染它、创建并渲染它的子级、在其数据绑定属性发生更改时检查它，并在将其从 DOM 中删除之前销毁它。

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

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