指令中的 Angular2 样式

在属性指令（即添加外观/行为的指令）的给定示例中，我们在宿主元素上对样式进行了相当简单的设置。

import {Directive, ElementRef } from 'angular2/core';
@Directive({
    selector: '[myHighlight]'
})
export class HighlightDirective {
    constructor(element) {
       element.nativeElement.style.backgroundColor = 'yellow';
    }

static get parameters(){
    return [[ElementRef]];
}

我可以使用样式代替设置样式吗？例如

@Directive({
    selector: '[myHighlight]',
    styles: [':host { background-color: yellow; }']
})

这似乎对我不起作用？

我正在做一些稍微复杂的事情，这导致了相当多的单一代码，设置了很多样式，使用AnimationBuilder等等。在我看来，将其分成CSS中的类和动画会更好。

ViewEncapsulation = 模拟/默认，如果这很重要的话？

您可以使用主机绑定来绑定到样式属性：

@Directive({
    selector: '[myHighlight]',
    host: {
      '[style.background-color]': '"yellow"',
    }
})

or

@Directive({
    selector: '[myHighlight]',
})
class MyDirective {
  @HostBinding('style.background-color')
  backgroundColor:string = 'yellow';
}