指令中的 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，它仅在宿主元素内限定样式。

两种选择：

1)

您可以使用:host /deep/ .some-style-to-cascade-down-like-normal {} 告诉Angular 将您的样式向下级联到其所有后代，或将/deep/ 替换为>>>。请参阅Angular's Docs。

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

• 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's Button 使用同样的方法来解决这个问题。

还有一篇很棒的文章，名为 All the Ways to Add CSS to Angular 2 Components，它让我意识到了这一点，并解释了 Angular 如何处理所有三个 ViewEncapsulation 属性。

Answer 3

我已阅读您在第一个答案下方的评论。我不知道您将如何应用您的 30 条规则。 But few ways are here- plunker.

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

Answer 4

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

我是按以下方式完成的，它对我有用

<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...

}

Working Example

Answer 5

与@m.spyratos 相同，但使用 Renderer2：

import {
  Directive,
  ElementRef,
  OnInit,
  Renderer2
} from '@angular/core';

@Directive({
  selector: '[myButton]'
})
export class MyButtonDirective implements OnInit {
  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) { }

  public ngOnInit(): void {
    this.renderer.addClass(
      this.elementRef.nativeElement,
      'my-button'
    );
  }
}

Answer 6

只需像通常使用属性选择器一样设置元素的样式。在与您的指令相同的文件夹中创建一个myHighlight.directive.scss（或其他）文件，并在其中写入您的样式：

[myhighlight] {
  background-color: yellow;
}

如果您的应用没有自动包含您的样式文件，只需将其导入您的主样式文件即可。对我来说，在 Ionic 2 中它是自动拾取的。

如果你想使用特定的类而不是属性选择器，那么使用渲染器来添加类。

import {Directive, ElementRef, Renderer} from 'angular2/core';
@Directive({
    selector: '[myHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer) {
        this.renderer.setElementClass(this.el.nativeElement, 'my-highlight', true);
    }
}