同じコンポーネント、異なるスタイル

Question

1つのコンポーネントを設定して実行し、異なる場所で異なるスタイルで使用するのがベストプラクティスですか？ （動的スタイル？）

Answer 1

あなたの中にはstyleUrls/stylesオプションがあります。コンポーネントが表示されるときに使用するコンポーネントメタデータです。 ViewEncasulationをEmulated/Native（DOMをシャドーします）とすると良いでしょう。

私が使用してさまざまなスタイルの間this great article

Answer 2

スイッチ上に読むことをお勧めします：異なる（事前に定義されたクラスまたは属性）

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

の使用グローバルスタイル

* /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; 
} 

使用ホスト結合

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

は面白い "ハック" のためにもhttps://stackoverflow.com/a/36503655/217408参照してください。

Answer 3

私によれば、コンポーネントのプロパティ（属性）を通じてスタイルを制御することがベストプラクティスです。