在属性指令的给定示例(即,添加外观/行为的指令)中,我们对主机元素上的样式设置相当简单.
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"',}
})
要么
@Directive({
selector: '[myHighlight]',})
class MyDirective {
@HostBinding('style.background-color')
backgroundColor:string = 'yellow';
}
