Angular 直接 DOM 访问？

Question

我知道这个问题已经被问了无数次，并且在很多情况下都得到了答案。我相信我已经阅读了其中的大部分内容。不幸的是，我在这上面能找到的一切

1. 简单说明 ElementRef.nativeElement不好，不要使用它，但不会提供太多当前、有效 替代方案。
2. 是旧的，仍在谈论渲染器被弃用和其他测试版问题。
3. 涵盖非常具体的用例，在该用例之外并不特别适用

因此，我正在努力了解当前的情况。 v5 是最近发布的，许多方面的情况总体上已经稳定下来。 当前 很重要 - 我们正准备开始一个全新的项目，没有任何遗留问题，所以我们希望尽可能干净地开始。

采取以下方法是否安全:

• 在指令中，您将拥有一个有效的 ElementRef(否则指令代码将不会运行)，因此访问它是 nativeElement属性(property)安全。几乎官方文档中的每个指令示例都是这样做的
• 使用 nativeElement连同Renderer2 (例如 this.renderer2.setStyle(elm.nativeElement, 'background-color', 'red'); ) 没问题，因为 Renderer2 以某种方式神奇地使它工作(Renderer2 是另一件事，我找不到关于它如何执行这种魔法的真正好的文档)
• 使用 nativeElement如果你不是而且永远不会是，总是可以的，做服务器端渲染或使用网络 worker (请忽略我们无法预测 future 的事实)
• 在所有其他情况下，将模板引用变量 (#myElement) 放在元素上并使用 @ViewChild('myElement') , @ViewChildren('myElement') myElements: QueryList<ElementRef>; ，或类似 @ContentChild/ren('myElement',{read:ElementRef })获取和使用元素
• 始终练习良好的防御性编码并确保您确实拥有有效的 nativeElement在尝试使用它之前。

请注意，在大多数情况下，我们仍在使用 nativeElement它们只是在我们访问它的方式上有所不同。对我来说，这意味着 nativeElement本身不是问题，关键在于你如何获得和使用它。我错过了什么吗？以上有任何问题吗？我试图了解事实，而不是观点，所以任何指向官方文档的链接，甚至是非常好的当前博客文章都会很棒。

谢谢。

Answer 1

通常，当您需要更改 DOM 元素属性时，您应该更喜欢 Renderer2 服务。但不要使用 Renderer2 来更改 DOM 层次结构。而是使用模板技术和 View 容器。

Using nativeElement is always OK if you are not and will never be, doing server side rendering or using web workers (please disregard the fact that we can't predict the future)

是的。或移动设备。

To me, that means nativeElement itself isn't a problem, it's all in how you get it and use it.

不同的平台可以通过不同的方式实现对 DOM 元素的访问。例如，webworker 中的 Renderer2 服务，而不是调用 native DOM 方法(webworker 中不存在)只是将消息传输到主 UI 线程。如果直接使用 nativeElement，则会出现错误。