【发布时间】：2017-01-19 14:53:31
【问题描述】：
我想知道是否有办法访问 Angular2 组件中的 DOM 元素的属性，无需使用 nativeElement 来维护 DOM 独立性。
我目前使用渲染器来设置 DOM 属性。但是，我不确定在不使用 nativeElement 直接访问 DOM 的情况下检索 DOM 元素属性值的正确解决方案。 This link advises to do this, however was posted in June从那以后我们有没有想出更好的东西？
我目前的实现如下：
import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
@Component({
selector: 'div',
templateUrl: './div.component.html',
styleUrls: ['./div.component.css']
})
export class DivComponent{
@ViewChild('element') ele: ElementRef;
overlayMargin: string;
constructor(private el:ElementRef) {}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.overlayMargin = this.ele.nativeElement.offsetHeight + 'px';
}
}
每当调整窗口大小时，我都会设置边距。 要关注的主要代码部分是 this.ele.nativeElement.offsetHeight
据我了解，以这种方式获取属性值会使我的组件 DOM 依赖，而负面影响是将来无法使用 Web Worker。
我注意到使用 Ruler 之类的解决方案，但它是 removed，在最后一个链接中，他们建议“暂时直接访问 DOM”但是，那是在 2016 年 6 月，现在是 2017 年，我我环顾四周，并没有找到任何明显的解决方案。是否已经开发了新的 API 来解决这个问题？如果可能的话，我想避免直接访问 DOM 以保持组件的独立性。
所以我的问题是：有更好的方法吗？还是.nativeElement 和ViewChild 是目前最好的方法？ （截至 2017 年 1 月 18 日）
【问题讨论】：
-
没有直接的 DOM 访问权限就无法从 DOM 中读取数据。只要您不使用服务器端渲染或网络工作者，现在似乎直接 DOM 访问就可以了。
-
这就是我所担心的。我意识到服务器端渲染是不可能的，因为还没有 DOM，所以那些 .nativeElements 将是未定义的。如果对于服务器端渲染，我们并行启动另一台服务器，该服务器运行类似 Selenium 的浏览器，就像用于 E2E 测试的浏览器一样。然后我们可以告诉 angular 使用服务器端的 DOM 来获取初始值，甚至可以尝试从它们的初始请求中获取设备的宽度和高度，以使 Selenium 浏览器类似于客户端。只要资源消耗不严重，这可能是一个很好的功能请求。
-
我没有使用 SSR，但我认为有一种方法可以确定代码是在客户端还是服务器上运行，它们只是跳过对 DOM 的调用并返回一些默认值
-
我没有看到好处。为什么不只使用默认值？ Selenium 的添加速度很慢，使得设置更加复杂。
-
我会试一试，如果可行，我会分享我的实现 :) 再次感谢您为我指明正确的方向！
标签： angular dom typescript