angular - 如何在不使用本机 API/DOM 方法（而是使用 Angular API）的情况下以编程方式获取 Angular 中的元素引用？

Question

我对 Angular 还很陌生，所以我的一些假设是错误的。

我想在运行时使用Renderer2.setStyle(elementRef, style, value, flags?).
为此，我需要一个元素参考。

Angular 文档总是警告不要通过浏览器的原生 API 来操作样式或获取元素引用。

例如，文档ElementRef.nativeElement明确指出：

当需要直接访问 DOM 时，将此 API 用作最后的手段。改用 Angular 提供的模板和数据绑定。或者，您可以查看 Renderer2，它提供了即使不支持直接访问本机元素也可以安全使用的 API。

依赖直接 DOM 访问会在您的应用程序和渲染层之间创建紧密耦合，这将使得无法将两者分开并将您的应用程序部署到 Web Worker 中。

现在，我想要设置样式的元素是通过我使用的另一个组件即时创建的。例如，我不知道我需要触摸多少个，因此使用基于注释的方法似乎不可行。（我假设，在评估任何基于注释的选择器之后，子组件也将被渲染？）

无论如何，我想基于 CSS 类和自定义属性进行选择，我可以在运行时计算其值（并且每个元素都会有所不同 - 没有什么是for循环无法处理的，但很难在文本选择器中表达？ ):
myClass[myProp="val_1..n"]

有没有办法使用 Angular API 获取元素引用，即无需通过nativeElement，喜欢document.querySelector(...)或ElementRef.nativeElement.querySelector(...)？

我基本上在寻找类似的东西RendererX.querySelector(componentRef, 'selector')- 但我认为这Renderer2.selectRootElement(...)不是我想要的......

tldrdocument.querySelector(...) ：如何在不通过浏览器 API/DOM 方法（如或调用我自己）的情况下从 CSS 选择器转到元素引用nativeElement？有 Angular API 抽象吗？

标签： angulardomselector