指令中的Angular2样式

前端之家收集整理的这篇文章主要介绍了指令中的Angular2样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
属性指令的给定示例(即,添加外观/行为的指令)中,我们对主机元素上的样式设置相当简单. @H_301_1@import {Directive,ElementRef } from 'angular2/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(element) { element.nativeElement.style.backgroundColor = 'yellow'; } static get parameters(){ return [[ElementRef]]; }

而不是设置风格,我可以使用风格吗?例如

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

这对我来说似乎不起作用

我正在做一些稍微复杂一些的事情,这导致了相当多的单音节代码,设置了很多风格,使用AnimationBuilder等等,感觉到像在CSS中分类到类和动画会更好一些.

ViewEncapsulation =模拟/默认如果重要?

您可以使用主机绑定绑定到样式属性: @H_301_1@@Directive({ selector: '[myHighlight]',host: { '[style.background-color]': '"yellow"',} })

要么

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

猜你在找的Angularjs相关文章