指令中的Angular2样式

Question

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

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 =模拟/默认是否重要？

Answer 1

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

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

要么

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

Answer 2

虽然其他答案在大多数情况下都很有用,但您似乎需要一种更传统的CSS样式表方法,就像我有一个用例一样.

问题是Angular默认模拟Shadow DOM,它只在hosts元素中定义样式.

两种选择:

1)

您可以使用角度讲,通过其所有后代下来级联您的样式:host /deep/ .some-style-to-cascade-down-like-normal {}或更换/deep/用>>>.请参阅Angular的文档.

需要注意的三个重要事项:

• ViewEncapsulation需要是其默认(模拟)状态
• Angular/Chrome在使用更好的方法时,正在弃用这两种语法
• 如果您使用的是Angular CLI,则必须使用/deep/而不是>>>

2)

虽然你将松开作用域组件封装(如果在你的情况下这很重要),这里是一个使用"myHighlight" 作为指令虽然TypeScripted作为组件的例子,所以我可以导入样式表:

用法:
<p myHighlight>Highlight me!</p>

TS(作为指令处理的组件):

import {
    Component,
    ViewEncapsulation
} from '@angular/core';

@Component({
    selector: 'p[myHighlight]', // Refer to it like an attribute directive
    templateUrl: './my-highlight.component.html',
    styleUrls: ['./my-highlight.component.scss'],
    encapsulation: ViewEncapsulation.None // Tell Angular to not scope your styles
})

Angular Material 2的Button使用相同的方法来解决这个问题.

这里有一篇很棒的文章,称为向Angular 2组件添加CSS的所有方法,这让我了解了这一点,并解释了Angular如何处理所有三个ViewEncapsulation属性.

Answer 3

对于这个答案来说已经太晚了，但是在我的同类需求中使用了一个棘手的解决方案，所以我觉得它可能会对某人有所帮助。

我按照以下方式做了，它对我有用

<div class="someClass" customDirective>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[customDirective]'
})
export class CustomDirective {
  domElement: any;

  constructor(private elementRef: ElementRef) {
  this.domElement = this.elementRef.nativeElement;
  const newStyles = {
     'background-color': 'yellow',
     'color': 'red',
     'font-weight': 'bold',
     //...and so on
    };
   Object.keys(newStyles).forEach(element => {
     this.domElement.style.setProperty(`${element}`,newStyles[element]);
    }      

  } 
//Other logic required for the directive...

}

工作示例

Answer 4

我已阅读您在第一个答案下方的评论。我不知道您将如何应用30条规则。 但是，几乎没有办法。

selector:"[myHighlight]", 
    host: {        
    '(mouseenter)':'changeColor()',
    '[style.background]': '"pink"', 
    '(click)':'clickMe()',
    '(mouseout)':'changeColorOnOut()',
  }