Angular 2组件样式来自输入

Question

我们可以使用插值表达式将输入写入模板中：

@Component({
    selector: 'tag',
    inputs: ['color'],
    template: `
        <div id="test" style="background: {{color}}">
            Some text
        </div>
    `,  
})
class TestComponent {
}

我的问题是：是否有可能使其（某种方式）像这样工作：

@Component({
    selector: 'tag',
    inputs: ['color'],
    template: `
        <div id="test">
            Some text
        </div>
    `,  
    styles: ['#test { background: {{color}}; }'],
})
class TestComponent {
}

这最后一次尝试不起作用，我似乎找不到一种方法来解决问题。

谢谢。

- Willem van Gerven

Answer 1

据我所知，您不能这样做。组件的styles元数据无法访问其Class变量。我建议您使用ngClass/ngStyle。

<div id="test" [ngStyle]="{ 'background': color }">
    Some text
</div>

- Pankaj Parkar