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... por ejemplo
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 ha llevado a una buena cantidad de código monolítico, estableciendo muchos estilos, usando AnimationBuilder, etc. Me parece que sería mucho mejor separar esto en clases y animaciones en un CSS.
ViewEncapsulation = emulado/predeterminado si eso importa?
Puede usar el enlace de host para enlazar atributos de estilo:
@Directive({ selector: '[myHighlight]', host: { '[style.background-color]': '"yellow"', } })o
@Directive({ selector: '[myHighlight]', }) class MyDirective { @HostBinding('style.background-color') backgroundColor:string = 'yellow'; }Si bien las otras respuestas son útiles en la mayoría de las circunstancias, parece que necesita un enfoque de hoja de estilo CSS más tradicional como el que tuve para un caso de uso.
El problema es el valor predeterminado de Angular de emular un Shadow DOM que abarca los estilos solo dentro del elemento host.
DOS OPCIONES:
1)
Puede decirle a Angular que coloque en cascada sus estilos a través de todos sus descendientes usando :host /deep/ .some-style-to-cascade-down-like-normal {} o reemplace /deep/ con >>> . Consulte los documentos de Angular sobre esto.
Tres cosas importantes a tener en cuenta:
/deep/ en lugar de >>>2)
Aunque perderá la encapsulación del componente con ámbito (si eso es importante en su caso), aquí hay un ejemplo que usa "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 excelente artículo llamado Todas las formas de agregar CSS a los componentes de Angular 2 que me hizo tomar conciencia y explica cómo Angular trata las tres propiedades de ViewEncapsulation.
He leído tu comentario debajo de la primera respuesta. No sé cómo serías capaz de aplicar tus 30 reglas. Pero hay pocas formas aquí: plunker .
selector:"[myHighlight]", host: { '(mouseenter)':'changeColor()', '[style.background]': '"pink"', '(click)':'clickMe()', '(mouseout)':'changeColorOnOut()', }