javascript - nativeElement 对象，DOM 操作

Question

我刚刚了解到关键字“nativeElement”不兼容跨浏览器，例如：

let whatever = <HTMLDivElement>this.$elementRef.nativeElement;
whatever.style.display = 'none';

现在通过使用像这样的渲染方法来纠正。

this._render.setElementClass(whatever, 'display', 'none');

但是我也有以下内容：

this.whatever = <HTMLDivElement>this.$elementRef.nativeElement.querySelector(".myLookupClass");

请告知是否在这种情况下

".nativeElement.querySelector(".myLookupClass")"跨浏览器工作？如果没有，请告知替代技术。

提前致谢。

score 2 · Accepted Answer

您的代码将在跨浏览器上运行。首先，当您编写以下代码时，您需要了解实际给您 Angular 的原因：

this.$elementRef.nativeElement

Angular 将为您提供在 DOM 上呈现的组件的引用。这意味着 Angular 提供了一个普通的 javascript 对象，你可以在任何浏览器上使用这个对象。所以继续使用你的代码。这将在任何浏览器上得到支持。

score 1 · Accepted Answer

nativeElement与“跨浏览器”无关，而是与“跨平台”相关，其中“平台”是 DOM 线程、Web Worker 线程、服务器端渲染……

如果你想使用 Angular 提供的 Web Worker 功能，或者服务器端渲染（Angular Universal），你应该或者需要避免访问nativeElement. 传递nativeElement（Renderer2尽管方法很好）。

如另一个答案中所述，nativeElement返回 DOM 元素，这在不是浏览器 DOM 线程的平台中不可用。

如果您的应用程序只使用浏览器的 DOM 线程，那么避免访问nativeElement...属性和方法并没有什么特别的好处，只是会阻止您以后使用其他平台。

2 回答 2