Angular2 Component Instanzen mit verschiedenen CSS

Question

Ich habe eine Angular2 App mit Komponenten, von denen ich mehrere auf der gleichen Seite verwenden möchte. Ich hatte ursprünglich drei Komponenten, aber im Sinne des Refactoring möchte ich einige der Funktionen zu einem kombinieren.

Die grundlegende HTML-Code der Komponente ist wie folgt:

<div class="component-class componentA-main" > 
    <div class="result componentA"> 
    <div class="canvasContainer"> 
     ... common component functionality here ... 
     <canvas id="canvas_container"></canvas> 
    </div> 
    <div class="componentA-results"> 
    ... common component functionality here ... 
    </div> 
</div> 

Die beiden anderen Komponenten, die die gleiche Struktur/Funktionalität haben nur mit der CSS anders zu sein. Jede Komponente hat auch ihre eigene CSS-Datei.

Die Komponenten würden in der folgenden Art und Weise verwendet werden:

<div> 
<component id="ComponentA"></component> 
<component id="ComponentB"></component> 
<component id="ComponentC"></component> 
</div> 

Hier mein Denken ist keine bauteilspezifischen CSS-Klassen, um etwas generisch und drei verschiedene Komponenten CSS-Dateien (componentA.css, componentB müssen umbenennen. css, etc.)

Ich bin jedoch unsicher, wie Sie jede Instanz der Komponente die richtige CSS verwenden. Das einzige, was ich dachte war etwas entlang der Linien von:

<component id="ComponentA" [css-main]='???' [css-result]='???'></component> 

Dies ist jedoch ein Chaos @Input verwendet, wird geworden, die ich nicht das Gefühl, sollte für das Styling ohnehin verwendet werden.

Gibt es einen richtigen/besseren Weg, dies zu tun, oder würde ich empfehlen, dass ich zu viel von einer Komponente erwarte und mit 3 separaten bleibe?

Dank

Answer 1

Ich bin über die Nutzung immer noch nicht sicher, aber hre ist mein Vorschlag auf Ihrer Anforderung. Das heißt, den Parameter 'styleUrls' zu verwenden und den Style in diese Style-Dateien aufzuteilen.

Hier ist mein Beispiel:

Komponente:

@Component({ 
    selector: 'my-component', 
    templateUrl: 'my-component.component.html', 
    styleUrls: ['my-component_A.component.css','my-component_B.component.css'] 
}) 
... 

Sie html:

<my-component id="component_A"></my-component> 
<my-component id="component_B"></my-component> 

Sie CSS geschaffen.
my-component_A.component.css

:host 
    #component_A 
     background: red; 

my-component_B.component.css

:host 
    #component_B 
     background: green; 

Noch wenn Sie ähnliche Dinge mit den ngClass und style Attribute tun können.