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

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

假设您在组件或指令中：

1-使用nativeElement：

let color = elementRef.nativeElement.style.color;

但是,建议不要这样做,因为如果您打算将来使用类似Web工作程序的东西,则不希望直接访问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 
        } );

这很酷,但是统治者不会给我颜色或任何其他样式,基本上标尺只给出Rectangle(基本上是Element.getBoundingClientRect()).

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

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

可能的答案：

刚看了一下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方法,所以应该有希望！

我将提供更详细的信息,因为我要去谷歌搜索和调查.

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

相关文章