Angular2 Styles in a Directive

问题:

In the given examples of Attribute directives (i.e. a directive to add appearance/behaviour), we have a fairly simple setting of a style on the host element.. e.g.

import {Directive, ElementRef } from 'angular2/core';
@Directive({
    selector: '[myHighlight]'
})
export class HighlightDirective {
    constructor(element) {
       element.nativeElement.style.backgroundColor = 'yellow';
    }

static get parameters(){
    return [[ElementRef]];
}

Rather than setting the style, can i use a styles instead? e.g.

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

This doesn't seem to work for me?

I'm doing something slightly more complex which has led to a fair amount of monolothic code, setting lots of styles, using AnimationBuilder etc etc. feels to me like it would be much better to seperate this out into classes and animations in a CSS.

ViewEncapsulation = emulated/default if that matters?

回答1:

You can use host binding to bind to style attributes:

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

or

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

回答2:

While the other answers are helpful in most circumstances, you seem to need a more traditional CSS stylesheet approach like I had a use case for.

The issue is Angular's default of emulating a Shadow DOM which scopes styles only within the host element.

TWO OPTIONS:

1)

You can tell Angular to cascade your styles down through all its descendants using the :host /deep/ .some-style-to-cascade-down-like-normal {} or replace /deep/ with >>>. See Angular's Docs about this.

Three important things to note:

• ViewEncapsulation needs to be its default (emulated) state
• Angular/Chrome are deprecating both these syntaxes while they are working on a better approach
• If you're using the Angular CLI, you have to use the /deep/ instead of >>>

2)

Though you'll loose the scoped component encapsulation (if that matters in your case), here is an example using "myHighlight" as a directive though TypeScripted as a component so I can import the stylesheet:

USAGE:
<p myHighlight>Highlight me!</p>

TS (component treated as a directive):

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 uses this same approach to solve this issue.

And here's a great article called All the Ways to Add CSS to Angular 2 Components which brought me to this awareness and explains how Angular treats all three ViewEncapsulation properties.

回答3:

I have read your comment below first answer. I don't know how would you be able to apply your 30 rules. But few ways are here- plunker.

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

回答4:

Same as @m.spyratos, but using 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'
    );
  }
}

回答5:

Just style the element as you would do normally using the attribute selector. Create a myHighlight.directive.scss (or whatever) file in the same folder as your directive and write your styles in there:

[myhighlight] {
  background-color: yellow;
}

If your app doesn't include your style file automatically, just import it in your main style file. For me in Ionic 2 it was picked up automatically.

If you want to use a specific class instead of the attribute selector, then use the Renderer to add the class.

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