角2奇怪的行为：根元素风格属性是空字符串

Question

即时通讯实验与Angular2，并得到了点，我想有动态样式扩展im 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'背景'被设置为“绿色”，就像预期的那样，因为它是内联样式。

为了测试它，我也尝试了不同的浏览器（只是Chrome和Firefox在这里），并测试了“style'-地产本网站上（它工作正常，在这里）：

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

经过所有这些测试后，我没有找到适当的解决方案。即使BrowserDomAdapter也不起作用，因为它使用完全相同的代码来转到样式属性。

这是Angular2 Framework的一个bug。如果是，它会被报告，并且有任何解决方法。如果没有，是否有任何解决方法，或将来会改变。

该功能不是非常必要的，但会帮助我完成工作。我需要这个的原因是因为我使用动态生成的样式表，并且我的组件的用户应该可以用ngStyle和Angular2的'[style.property]'语法覆盖它们。请注意，出于某些原因，我不会使用Component-Decorator的'style'属性并将它们包含在内。

谢谢你的帮助。

Answer 1

在firefox中调试时，我得到了一个答案。现在很清楚，为什么会发生这种情况。实际上，浏览器显示的是'style'的版本 - 当我的构造函数被调用时，该版本比版本更新。

风格尚未应用，但我目前不知道，它应用于何处。

更新： 我明白了。好的，差不多。我不完全知道风格应用在哪里，但这并不是真的需要做我想做的事情。只需牢记一件事。构造函数将尽早在Angular2中进行DOM操作。使用其他生命周期方法（如'ngOnInit'）或使用组件装饰器的'主机'属性来实现确切的行为是必要的。

下面是一些代码来解释上面的文字。我刚刚更新了'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); 
     } 
    } 
} 

这是我的问题的解决方案，显然它是不是一个错误，但遗憾的是这不是记录。我希望我能帮助别人。