Angular2コンポーネント異なるCSSのインスタンス

Question

コンポーネントを持つAngular2アプリがありますが、その中には同じページで何度も使用したいものがあります。私はもともと3つのコンポーネントを持っていましたが、リファクタリングの精神の中で、私はその機能のいくつかを1つにまとめたいと思っています。

次のようにコンポーネントの基本的なHTMLである：

<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> 

他の二つの成分のみCSSは異なるものと同一の構造/機能を有しています。各コンポーネントには独自のCSSファイルもあります。

コンポーネントは次のように使用することになります。

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

今ここに私の考えはcomponentA.css、componentB（一般的な何かに任意のコンポーネントの特定のCSSクラスの名前を変更し、三つの異なるコンポーネントのCSSファイルを持つことです。 CSSなど）

しかし、コンポーネントの各インスタンスを正しいCSSを使用する方法を確信できません。これは、しかし、私はとにかくスタイリングのために使用すべきであると感じていない@Inputを使用して混乱になるだろう

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

：私は考えていた唯一のものは、の線に沿って何かでした。

これを行うには正しい/より良い方法がありますか、あまりにも多くのコンポーネントが必要であり、3つの別々のコンポーネントを使用することを期待しているのがベストプラクティスでしょうか？

おかげ

Answer 1

は、私はまだ使用法についてはよく分からないが、HREはあなたの要求に基づいて、私の提案です。それは 'styleUrls'パラメータを使用し、それらのスタイルファイルであなたのスタイルを分割することです。

はここに私の例です：

コンポーネント：

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

あなたのHTML：あなたはCSS

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

。

:host 
    #component_B 
     background: green; 

それでもあなたはngClassとstyle属性で同様のことを行うことができますが、私の-component_A.component.css

:host 
    #component_A 
     background: red; 

私-component_B.component.css。