指令中的Angular2样式

发布时间：2020-12-17 07:45:48 所属栏目：安全来源：网络整理

导读：在属性指令的给定示例(即,添加外观/行为的指令)中,我们对主机元素上的样式设置相当简单. import {Directive,ElementRef } from 'angular2/core';@Directive({ selector: '[myHighlight]'})export class HighlightDirective { constructor(element) { element

在属性指令的给定示例(即,添加外观/行为的指令)中,我们对主机元素上的样式设置相当简单.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!