访问angular2组件中某个元素的远视

我想知道，如果不使用nativeElement来维护DOM独立性，是否可以访问Angular2组件中DOM元素的属性

我目前使用渲染器设置DOM属性。但是，我不确定在不使用nativeElement直接访问DOM的情况下检索DOM元素属性值的正确解决方案。从那以后我们有没有想出更好的办法

我目前的执行情况如下：

从'@angular/core'导入{Component，ElementRef，HostListener，ViewChild}；
@组成部分({
选择器：“div”，
templateUrl:'./div.component.html'，
样式URL:['./div.component.css']
})
导出类组件{
@ViewChild（'element'）元素：ElementRef；
重叠边缘：字符串；
构造函数（私有el:ElementRef）{}
@HostListener（'窗口：调整大小'，['$event']））
onResize（事件）{
this.overlayMargin=this.ele.nativeElement.offsetHeight+'px'；
}
}

每当窗口调整大小时，我都会设置边距代码的主要部分是

这个.ele.nativeElement.offsetHeight

据我所知，以这种方式获取属性值会使我的组件依赖于DOM，其负面含义是将来不能使用WebWorkers

我注意到解决方案使用了类似的方式，在最后一个链接中，他们建议“现在直接访问DOM”，然而，那是在2016年6月，现在是2017年，我环顾四周，没有找到任何明显的解决方案。是否已制定新的API来解决此问题？我希望尽可能避免直接访问DOM，以保持组件的独立性

---

所以我的问题是：有没有更好的方法？或者

.nativeElement

和

ViewChild

是目前最好的方法吗？（截至2017年1月18日）确实不鼓励直接访问nativeElement，但这是唯一的方法，因为angular没有提供其他方法

我目前在我的应用程序中使用它，以避免在我的TypeScript代码中使用本机元素

(window:resize)="onNavResize(navbar.getBoundingClientRect())"

---

如果没有直接的DOM访问，就无法从DOM中读取数据。现在看来，只要不使用服务器端渲染或webworkers，直接访问DOM就可以了，这正是我所担心的。我意识到服务器端渲染是不可能的，因为还没有DOM，所以那些.nativeElement将是未定义的。如果为了服务器端渲染，我们并行启动另一台服务器，它运行类似于用于E2E测试的Selenium浏览器。然后我们可以告诉angular使用服务器端DOM来获取初始值，甚至可以尝试从初始请求获取设备的宽度和高度，以使Selenium浏览器与客户端类似。只要资源消耗不严重，这可能是一个很好的功能请求。我没有使用SSR，但我认为有一种方法可以确定代码是否在客户端或服务器上运行，而他们只是跳过对DOM的调用并返回一些默认值。我看不出有什么好处。为什么不使用默认值呢？Selenium的速度非常慢，添加会使安装更加复杂。我会尝试一下，如果可以的话，我会分享我的实现：）再次感谢您为我指明了正确的方向！