nativeElement 对象，DOM 操作答案

【问题标题】：nativeElement object, DOM manipulationnativeElement 对象，DOM 操作
【发布时间】：2018-06-17 08:25:46
【问题描述】：

我刚刚了解到关键字“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")" 可以跨浏览器工作吗？如果不是，请告知替代技术。

提前致谢。

【问题讨论】：

【解决方案1】：

您的代码将在跨浏览器上运行。首先，当您编写以下代码时，您需要了解实际赋予您的角度：

this.$elementRef.nativeElement

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

【讨论】：

【解决方案2】：

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

如果您想利用 Angular 提供的 Web Worker 功能，或服务器端渲染 (Angular Universal)，您应该或需要避免访问 nativeElement 的任何属性或方法。传递 nativeElement （不过像 Renderer2 方法一样很好）。

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

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

【讨论】：

谢谢，我希望它适用于移动设备和其他设备，因此我将避免使用 nativeElement。
我觉得跟移动端没关系，但不知道Ionic是怎么用Angular的。
那么你应该搜索离子特定的信息到nativeElement。我的回答只针对一般情况。我只是用谷歌搜索了一下，看起来 Ionic 并没有阻止使用nativeElement。只要在 Ionic 平台上尽早开始测试，您就会确定。