Gleiche Komponente, verschiedene Stile

Question

Was ist die beste Vorgehensweise, um eine Komponente einzurichten und auszuführen und sie mit verschiedenen Stilen an verschiedenen Orten zu verwenden? (dynamische Stile?)

Answer 1

Sie könnten styleUrls/styles Optionen in Ihnen haben Component Metadaten, die Sie verwenden würden, wenn diese Komponente gerendert wird in der Ansicht. Es wäre gut, wenn Sie ViewEncasulation als Emulated/Native (Schatten DOM) verwenden.

würde ich empfehlen, auf lesen this great article

Answer 2

Wechseln zwischen verschiedenen Arten verwendet: Host-Kontext()

Schalter von verschiedenen (vordefinierten Klassen oder Attribute) Anwendung

:host-context(.class1) { 
    background-color: red; 
} 

:host-context(.class2) { 
    background-color: blue; 
} 

<my-comp class="class1></my-comp> <!-- should be red --> 
<my-comp class="class2></my-comp> <!-- should be blue --> 

Verwenden globale Stile

* /deep/ my-comp.class1 { 
    background-color: red; 
} 

// or to style something inside the component 
* /deep/ my-comp.class1 /*deep*/ div { 
    border: solid 3px yellow; 
} 

* /deep/ my-comp.class2 { 
    background-color: blue; 
} 

Mit host-Bindung

@Component({ 
    selector: 'my-comp', 
    host: {'[style.background-color]':'backgroundColor'} 
}) 
class MyComponent { 
    @Input() backgroundColor:string; 
} 

<my-comp background-color="red"></my-comp> 
<my-comp background-color="red"></my-comp> 

Siehe auch https://stackoverflow.com/a/36503655/217408 für einen interessanten "Hack".

Answer 3

Laut mir die beste Praxis wäre die Kontrolle der Stile durch Eigenschaften (Attribute) der Komponente.