Angular直接DOM访问？

Question

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

1. 简单地指出ElementRef.nativeElement不好，不使用它，但不提供当前，有效的方式备择方案。
2. 年纪不大，仍在谈论渲染器被弃用以及其他测试版问题。
3. 涵盖非常具体的用例，并不特别适用于该用例

因此，我试图将目标放在当前的位置。 v5最近发布，事情在很多方面都得到了稳定。 当前非常重要 - 我们已经准备好开始一个没有传统背后的任何遗产的全新项目，所以我们希望尽可能保持清洁。

采取以下方法是否安全：

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

请注意，在大多数情况下，我们仍在使用nativeElement，但我们访问它的方式各不相同。对我来说，这意味着nativeElement本身并不是一个问题，而是你如何得到它并使用它。 我错过了什么吗？以上任何问题都有？我试图获得事实，而不是意见，所以任何官方文档的链接，甚至是当前很好的博客帖子都会很棒。

感谢。

Answer 1

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

  

如果您不是，也永远不会使用nativeElement，   做服务器端渲染或使用网络工作者（请忽略   我们无法预测未来的事实

是。或移动设备。

  

对我来说，这意味着nativeElement本身并不是一个问题，它全部在   你是如何得到它并使用它的。

不同的平台可以以不同的方式实现对DOM元素的访问。例如，webworker中的Renderer2服务，而不是调用本机DOM方法（它不存在于webworker中）只是将消息传输到主UI线程。如果您直接使用nativeElement，则会收到错误。