documentacion - Estilos angular2 en una directiva

change title angular 2

Question

En los ejemplos dados de directivas de atributos (es decir, una directiva para agregar apariencia / comportamiento), tenemos una configuración bastante simple de un estilo en el elemento host.

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

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

En lugar de establecer el estilo, ¿puedo usar un estilo en su lugar? p.ej

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

Esto no parece funcionar para mí?

Estoy haciendo algo un poco más complejo que me ha llevado a una buena cantidad de código monolótico, a configurar muchos estilos, a utilizar AnimationBuilder, etc. Me parece que sería mucho mejor separar esto en clases y animaciones en un CSS.

ViewEncapsulation = emulado / predeterminado si eso importa?

Answer 1

He leído tu comentario debajo de la primera respuesta. No sé cómo podría aplicar sus 30 reglas. Pero hay algunas formas aquí plunker .

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

Answer 2

Igual que @ m.spyratos, pero usando 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 3

Puede utilizar el enlace de host para enlazar a los atributos de estilo:

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

o

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

Answer 4

Si bien las otras respuestas son útiles en la mayoría de las circunstancias, parece que necesitas un enfoque de hojas de estilo CSS más tradicional, como el que tenía un caso de uso.

El problema es el valor por defecto de Angular de emular un DOM de Shadow que busca estilos solo dentro del elemento host.

DOS OPCIONES:

1)

Puede indicar a Angular que coloque en cascada sus estilos a través de todos sus descendientes utilizando :host /deep/ .some-style-to-cascade-down-like-normal {} o replace /deep/ with >>> . Ver los documentos de Angular sobre esto.

Tres cosas importantes a tener en cuenta:

• ViewEncapsulation debe ser su estado predeterminado (emulado)
• Angular / Chrome están desaprobando ambas sintaxis mientras trabajan en un mejor enfoque
• Si está utilizando la CLI angular, debe usar /deep/ lugar de >>>

2)

Aunque perderá la encapsulación del componente del ámbito (si eso importa en su caso), aquí hay un ejemplo que utiliza "myHighlight" como una directiva, aunque TypeScripted como un componente para que pueda importar la hoja de estilo:

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

TS (componente tratado como una directiva ):

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

El botón de Angular Material 2 utiliza este mismo enfoque para resolver este problema.

Y aquí hay un gran artículo llamado Todas las formas de agregar CSS a los componentes de Angular 2, que me dio a conocer y explica cómo Angular trata las tres propiedades de ViewEncapsulation.

Answer 5

Simplemente diseñe el elemento como lo haría normalmente con el selector de atributos. Cree un myHighlight.directive.scss (o lo que sea) en la misma carpeta que su directiva y escriba sus estilos allí:

[myhighlight] {
  background-color: yellow;
}

Si su aplicación no incluye su archivo de estilo automáticamente, simplemente impórtelo en su archivo de estilo principal. Para mí en Ionic 2 fue recogido automáticamente.

Si desea usar una clase específica en lugar del selector de atributos, use el Renderer para agregar la clase.

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