2016-05-17 15 views
8

Angular2に要素のスタイルを取得する方法がいくつかあります:Angular2適切な方法

の1- nativeElementを使用して:

みましょうあなたは、コンポーネントまたはディレクティブの中にいると言うが、 :あなたが将来的にウェブ労働者のようなものを使用することを目指している場合は、直接nativeElementにアクセスしたくないので

let color = elementRef.nativeElement.style.color; 

ただし、これは推奨されません。 Rulerを使用して

:2-

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 
     }); 

これはクールですが、支配者が文句を言わない私に、または任意の他のスタイルを与えることは、基本的に定規は(Element.getBoundingClientRectである(四角形を与えます) 基本的に) 。

そしてまた、我々は要素のスタイルを取得レンダラを使用することはできません、それだけでにメソッドを提供スタイルを設定します。

答えて

2

これは私が、それは正しくない可能性があります与えている可能性の答えですが、これははるかに私が持っているものである:

可能な答え:

ちょうど定規クラスに見て、実現それはDomAdapterを使用しており、ネイティブ要素を渡して長方形を取得します。

// 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方法を提供しているので、それがうまくいけば、それでなければなりません!

私は行くとグーグルと調査するように、より簡潔な情報を提供します。

+0

私はcssのdivにbackground-position-yを設定して、答えのメソッドを使ってその値を取得しようとすると、空の値が得られます。 – Dmitry