Angular2 获取元素/组件样式的正确方法

Question

在 Angular2 中有几种方法可以从元素中获取样式:

假设您在组件或指令中:

1- 使用 nativeElement :

    let color = elementRef.nativeElement.style.color;

但是，不推荐这样做，因为如果您打算在将来使用类似 web worker 的东西，您不想直接访问 nativeElement。

2- 使用 Ruler :

    this.domAdapter = new browser.BrowserDomAdapter();
    this.ruler      = new Ruler( this.domAdapter );
    this
        .ruler
        .measure( this.elementRef )
        .then( ( rect ) => {
           // Now we have access to height and width and left and top 
        } );

这很酷，但是尺子不会给我 color 或任何其他样式，基本上尺子只给出 Rectangle(基本上是 Element.getBoundingClientRect())。

而且，我们不能使用Renderer来获取元素样式，它只提供设置样式的方法。

Answer 1

这是我给出的一个可能的答案，它可能不正确，但这是迄今为止我所得到的:

可能的答案:

刚刚查看了 Ruler 类并意识到它正在使用 DomAdapter 并且它传递 native 元素以获取矩形。

   // This is native Angular2 source code : 
   var clntRect = this.domAdapter.getBoundingClientRect(el.nativeElement);

我认为这意味着如果我们想要获得样式，我们可以像这样使用 domAdapter:

   let color = this.domAdapter.getStyle( this.elementRef.nativeElement , 'color' )

正如我们所见，domAdapter 提供了 getStyles 方法，所以应该是这样吧!!

我将在进行谷歌搜索和调查时提供更简洁的信息。