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

Question

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

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

所以我看了一个很好的解决方法是使用ElementRef Directive。但是继续查找 Angular 文档建议不要这样做，因为紧耦合，什么是紧耦合？

在此处的文档中找到

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

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

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

提前致谢。

标签： angulardom

Answer 1

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

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

Angular 创建它，渲染它，创建和渲染它的子节点，当它的数据绑定属性发生变化时检查它，并在从 DOM 中删除它之前销毁它。

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

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