角2の不思議な動き：ルート要素スタイルのプロパティは空文字列

Question

現在、Angular2で実験していますが、ここでは動的なスタイル拡張をAngular2コンポーネントにしたいと思っています。物事をより明確にするために、ここにいくつかのコードがあります。

main.ts

import {bootstrap} from 'angular2/platform/browser'; 
import {App} from './app' 

bootstrap(App).then(error => console.log(error)); 

app.ts

import { Component } from 'angular2/core'; 
import { Button } from './button'; 

@Component({ 
    selector: 'app', 
    template: `<button [style.background]="'green'">Hallo Welt</button>`, 
    directives: [Button] 
}) 
export class App { } 

button.ts何かに今

import {Component, Input, ElementRef, Renderer} from "angular2/core"; 
import {BrowserDomAdapter} from "angular2/src/platform/browser/browser_adapter"; 

@Component({ 
    selector: 'button', 
    templateUrl: '<span [style.color]="test"><ng-content></ng-content></span>', 
    providers: [BrowserDomAdapter] 
}) 
export class Button { 
    test: string; 

    constructor(private renderer:Renderer, private elementRef:ElementRef, dom: BrowserDomAdapter) { 
     let styles = elementRef.nativeElement.style; 
     console.log(styles); 

     this.test = styles['background'] || 'red'; 
     console.log(this.test); 
    } 
} 

私は何だろう奇妙な行動を起こす。ちょうど場合には：私はDOM操作にはあまり慣れていませんが、私は答えを得ることなくこの問題で数時間を費やしました。あなたは、このアプリを実行すると、コンソールで次の出力を得る

：

• するCSSStyleDeclaration {...}
• 赤*

*スタイル[ '背景']されますただ空の文字列

しかしCSSStyleDeclarationでは、 'background'はインラインスタイルであるため、「緑」に設定されています。

はそれをテストするために、私はまた、別のブラウザ（ここだけのChromeとFirefoxの）でそれを試してみましたが、このウェブサイト上で「style'-プロパティをテストした（これは、ここでは正常に動作します）：

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_get_elmnt

このすべてのテストの後、私は適切な解決策には至りませんでした。 BrowserDomAdapterでも、スタイルプロパティを取得するために、まったく同じコードを使用するため、機能しません。

これはAngular2 Frameworkのバグですか？はいの場合は報告され、回避策があります。そうでない場合、回避策がありますか、または今後変更されます。

この機能は非常に必要ではありませんが、私の仕事に役立ちます。私がこれを必要とするのは、動的に生成されたスタイルシートを使用しているため、コンポーネントのユーザーがngStyleとAngular2の '[style.property]'構文で上書きできるためです。注意してください、私は使用しない 'スタイル' - プロパティのコンポーネント - デコレータとは、いくつかの理由で、それらをovveride。

ありがとうございました。

Answer 1

私はfirefoxでデバッグ中に私の問題に答えました。今、なぜこれが起こっているのかは明らかです。実際にブラウザが表示しているのは、私のコンストラクタが呼び出されたときにバージョンよりも新しい 'style' - Propertyのバージョンです。

スタイルはまだ適用されていませんが、現在適用されている場所はわかりません。

更新： 私は今それを得ました。さて、ほとんど。スタイルがどこに適用されているのか正確にはわかりませんが、これは本当に必要なことをする必要はありません。心に留めておくべきことの一つです。コンストラクタはAngular2でDOM操作を早期に行うことです。正確な動作を実現するには、 'ngOnInit'のような他のライフサイクルメソッドを使用するか、Componentデコレータの 'host'-プロパティーを使用する必要があります。

上記のテキストを説明するコードです。私はちょうど 'button.ts'を更新したので、他のアプリファイルの参照として質問のファイルを使います。

button.ts

import {Component, Input, ElementRef, Renderer, Inject, OnInit} from "angular2/core"; 
import {BrowserDomAdapter} from 'angular2/platform/browser'; 

@Component({ 
    selector: 'button', 
    templateUrl: 'app/button.html', 
    providers: [BrowserDomAdapter] 
}) 
export class Button implements OnInit { 
    get test() { 
     let dom = this.dom 
     let root = this.elementRef.nativeElement; 

     return dom.getStyle(root, 'background-color') || 'red'; 
    } 

    constructor(private renderer:Renderer, private elementRef:ElementRef, private dom: BrowserDomAdapter) {} 

    ngOnInit() { 
     let dom = this.dom 
     let renderer = this.renderer; 
     let root = this.elementRef.nativeElement; 

     if(dom.hasStyle(root, 'background-color')) { 
      let backgroundColor = dom.getStyle(root, 'background-color'); 

      renderer.setElementStyle(root, 'color', backgroundColor); 
     } 
    } 
} 

は、これは私の問題を解決すると明らかにそれはバグではありません、残念ながらこれは文書化されていません。私は誰かを助けることができたらいいと思う。