Angular2: Was ist der beste Weg, Styling an eine Komponente zu übergeben?

Question

Also habe ich diese Komponente namens InputEdit (im Grunde ein Label, das bearbeitet werden kann, wenn Sie darauf klicken ... einfach genug) und diese Komponente hat eine eigene beschattet Dom CSS-Styling. Aber natürlich möchte jede Hosting-Komponente eine eigene Schriftgröße und Farbe für die Eingabekomponente festlegen ...

also was wäre der beste Weg? Können Sie nur eine Styling-Klasse übergeben und das gesamte CSS auf die Komponente anwenden? oder wäre es besser, jeden Wert zu übergeben manuell in:

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

, die eine Menge Arbeit scheinen würde ... aber wieder, da wir den Schatten oder emulierten dom verwenden, können wir nicht nur die CSS-Kontrolle extern ...

ich bin mir auch bewusst, dass Sie den Schatten öffnen Spleiß und direkte Elemente über Ziel:

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

die im Grunde Ihnen erlaubt, in eine benutzerdefinierte Komponente eingeben Userinfo/tief (jeder Ebene benannt)/benutzerdefinierte Komponente InputEdit und Ziel Label mit Farbe rot ...

aber noch einmal, ich frage mich, was ist der beste Ansatz speziell für ng2 ... wie eine Klassenkonfiguration in eine Direktive vielleicht übergeben?

Danke,

Sean

Answer 1

Ich würde nur eine styles Eingabeeigenschaft auf InputEdit verwenden und mit den gewünschten Arten in einem Objekt übergeben:

<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 

Wenn Sie mehr DOM-Elemente haben Möchte stilisieren, ein komplexeres Objekt übergeben:

<InputEdit [styles]="stylesObj"> 

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

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

Answer 2

/deep/, ::shadow und >>> sind veraltet.

Die deprecation ist nur für die native Implementierung in Chrome (andere Browser es nie umgesetzt), aber Angular hat seine eigene Emulation dieser CSS combinators in ViewEncapsulation.Emulated (default)

/deep/, ::shadow und >>> können daher verwendet werden, gerade gut in Angular2.

Seit mehr als einfache Klassen oder Stil-Einstellungen verwenden ngStyleAngular 2.0 and ng-style

Answer 3

Mark Rajcok's Antwort ist für eine Gruppe von Arten gut, aber wenn Sie nur die Schriftgröße und Farbe gehen zu lassen, Sie geändert werden möchten einen direkteren Ansatz verwenden, wie Sie mit gestartet wird (in diesem Beispiel auch nur Pixel statt einer flexibleren Saite zu Demonstrationszwecken Durchsetzung):

fÜR INDIVIDUELLE ART Eigenschaften:

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

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

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

---

Wenn eine Gruppe von STYLES ERLAUBEND:

Komponente:
<InputEdit [styles]="{backgroundColor: 'blue', 'font-size': '16px'}"> HINWEIS: Achten Sie darauf, die CSS-Eigenschaften sind camelCased oder in einer Zeichenfolge, wenn mehr als ein Wort vorhanden ist.

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

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