Angular2: qual è il modo migliore per passare lo stile a un componente?

Question

Quindi ho questo componente chiamato InputEdit (fondamentalmente un'etichetta che può essere modificata quando si fa clic su di esso ... abbastanza semplice) e questo componente ha il proprio stile dom dom CSS. Ma ovviamente ogni componente di hosting vorrà impostare la propria dimensione e colore del carattere per il componente di input ...

quindi quale sarebbe il modo migliore? Puoi semplicemente passare una classe di stile e applicare l'intero CSS al componente? o sarebbe meglio passare manualmente ogni valore come in:

 <InputEdit [color]="'red'"/> 

che sembrerebbe un sacco di lavoro ... ma ancora una volta da quando stiamo utilizzando l'ombra o dom emulata, non possiamo controllare il CSS esternamente ...

sono anche consapevole del fatto che è possibile unire aprire l'ombra e indirizzare elementi diretti tramite:

/* styles.css */ 
UserInfo /deep/ InputEdit label { 
    color: red; 
    font-size: 1.1em; 
} 

che sarà essenzialmente permetterà di entrare in un componente personalizzato denominato UserInfo/profonda (qualsiasi livello)/componente personalizzato InputEdit e etichetta di destinazione con colore rosso ...

ma ancora una volta, mi chiedo quale sia l'approccio migliore specificamente per ng2 ... come passare una classe di configurazione in una direttiva forse?

Grazie,

Sean

Answer 1

Vorrei solo utilizzare una proprietà di input styles su InputEdit, e passare un oggetto con gli stili desiderati:

<InputEdit [styles]="stylesObj">     // in host component's template 

stylesObj = {font-size: '1.1em', color: 'red'}; // in host component class 

<input [ngStyle]="stylesObj" ...>    // in InputEdit component's template 

Se si dispone di più voi elementi DOM vuoi stile, passa in un oggetto più complesso:

<InputEdit [styles]="stylesObj"> 

stylesObj = { 
    input: {font-size: '1.1em', color: 'red'} 
    label: { ... } 
}; 

<label [ngStyle]="styles.label" ...> 
<input [ngStyle]="styles.input" ...> 

Answer 2

/deep/, ::shadow e >>> sono obsoleti.

La disapprovazione è solo per l'implementazione nativa in Chrome (altri browser non implementati), ma angolare ha una propria emulazione di questi combinatori CSS in ViewEncapsulation.Emulated (default)

/deep/, ::shadow e >>> possono quindi essere utilizzati bene in Angular2.

Per più di semplici classi o le impostazioni delle proprietà di stile utilizzare ngStyleAngular 2.0 and ng-style

Answer 3

Mark Rajcok's risposta è buona per un gruppo di stili, ma se si sta solo andando per consentire al font-size e il colore da cambiare, è può decidere di utilizzare un approccio più diretto, come si è iniziato con (in questo esempio, anche far rispettare solo i pixel invece di una stringa più flessibile a scopo dimostrativo):

pER PROPRIETÀ stile individuale:

Componente:
012.351.<InputEdit [color]="'red'" [fontSize]="16">

componente.ts:
Input() color: string = 'black';
Input() fontSize: number = 18;

component.template:
<input type="text" [style.color]="color" [style.fontSize.px]="fontSize">

---

SE quale un gruppo di stili:

Componente:
<InputEdit [styles]="{backgroundColor: 'blue', 'font-size': '16px'}"> NOTA: Assicurarsi che le proprietà CSS sono CamelCased o in una stringa se è presente più di una parola.

component.ts:
@Input() styles: any = {};

component.template:
<input type="text" [ngStyle]="styles">