访问angular2组件

Question

我想知道是否无论如何都要访问Angular2组件中DOM元素的属性，没有使用nativeElement来维护DOM独立性。

我目前使用渲染器来设置 DOM属性。但是，我不确定检索 DOM元素属性值的正确解决方案，而不使用nativeElement直接访问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，现在直接访问DOM。然而，那是在2016年6月，现在是2017年，我环顾四周，并没有找到任何明显的解决方案。有没有新的API来解决这个问题？我希望尽可能避免直接访问DOM，以保持组件的独立性。

所以我的问题是：有更好的方法吗？或者.nativeElement和ViewChild是目前最好的方法吗？ （截至2017年1月18日）

Answer 1

确实不鼓励直接访问nativeElement，但这是唯一的方法，因为angular不会为此提供其他方法。

我目前在我的应用程序中使用它来避免在我的TypeScript代码中使用native元素

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