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 {...}
红*

* styles ['background']只是一个空字符串

但是在CSSStyleDeclaration中，'background'设置为“green”，正如预期的那样，因为它是内联样式。

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

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

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

这是Angular2 Framework的错误吗？如果是，则报告并且有任何变通方法。如果没有，是否有任何变通办法，或将来会改变。

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

感谢您的帮助。

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

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

Angular 2奇怪的行为：根元素样式属性是空字符串

1 个答案: