Stili angolari2 in una direttiva

Question

Negli esempi forniti di direttive Attribute (ad esempio una direttiva per aggiungere aspetto/comportamento), abbiamo un'impostazione abbastanza semplice di uno stile sull'elemento host. Ad es.

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

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

Piuttosto che impostare lo stile, posso invece usare uno stile? per esempio.

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

Questo non sembra funzionare per me?

Sto facendo qualcosa di leggermente più complesso che ha portato a una buona quantità di codice monolingue, l'impostazione di molti stili, utilizzando AnimationBuilder ecc ecc. Mi sembra come sarebbe molto meglio separarlo in classi e animazioni in un CSS.

ViewEncapsulation = emulato/predefinito se ciò è importante?

Answer 1

È possibile utilizzare vincolante per l'associazione a stile ospite attributi:

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

o

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

Answer 2

Ho letto il tuo commento qui sotto prima risposta. Non so come saresti in grado di applicare le tue 30 regole. But few ways are here- plunker.

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

Answer 3

Basta impostare l'elemento come si farebbe normalmente utilizzando il selettore di attributo. Creare un file myHighlight.directive.scss (o altro) nella stessa cartella direttiva e scrivere i vostri stili in là:

[myhighlight] { 
    background-color: yellow; 
} 

Se la vostra applicazione non include il file stile automaticamente, basta importare nel vostro file di stile principale. Per me in Ionic 2 è stato rilevato automaticamente.

Se si desidera utilizzare una classe specifica anziché il selettore di attributo, utilizzare il Renderer per aggiungere la classe.

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

Answer 4

Mentre le altre risposte sono utili nella maggior parte dei casi, ti sembra di avere bisogno di un approccio più tradizionale di stile CSS, come ho avuto un caso d'uso per.

Il problema è l'impostazione predefinita di Angular di emulare un DOM ombra che circoscrive gli stili solo all'interno dell'elemento host.

due opzioni:

1)

Si può dire angolare a cascata gli stili verso il basso attraverso tutti i suoi discendenti con il :host /deep/ .some-style-to-cascade-down-like-normal {} o sostituire /deep/ con >>>. Vedi Angular's Docs su questo.

Tre cose importanti da notare:

• ViewEncapsulation ha bisogno di essere il suo stato (emulato) predefinita
• angolare/Chrome deprecarla entrambe queste sintassi, mentre si sta lavorando su un approccio migliore
• Se 're utilizzando la CLI angolare, è necessario utilizzare la /deep/ invece di >>>

2)

Anche se si perde l'incapsulamento componente ambito (se quello che conta nel tuo caso), ecco un esempio utilizzando "myHighlight" come una direttiva se TypeScripted come componente così posso importare il foglio di stile:

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

TS (componente trattata come una direttiva ):

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 utilizza questo stesso approccio per risolvere questo problema.

Ed ecco un grande articolo chiamato All the Ways to Add CSS to Angular 2 Components che mi ha portato a questa consapevolezza e spiega come Angular tratta tutte e tre le proprietà ViewEncapsulation.

Answer 5

Uguale @ m.spyratos, ma utilizzando 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' 
    ); 
    } 
}