Angular 2で同じコンポーネントを異なるスタイルにすることはできますか？

Question

私はアプリケーション全体で再利用したい汎用コンポーネントを持っています。問題は、サイトのさまざまな部分のスタイルを違うものにしたいということです。これは可能ですか？

私はstyleUrlのパスを渡す方法があると思っていますが、それは本当に乱雑に思えます、そして、私はもっと良い選択肢があると思っています。

私もこれを試してみましたが、それは動作しませんでした：コンポーネントを指定する場合、クラスに追加し、この

<generic-component class="customStyle1"></generic-component> 

ような何かをして、一般的なコンポーネントのスタイルシートにcustomStyle1に基づいてスタイルを追加しましたが、それそのスタイルでピックアップしていないようだ。

Answer 1

あなたのcomponentをテーマにしたスタイルで:host-contextを使用することができます。

それhere!!

test.css

:host-context(.theme-green) h3 { 
    background-color: green; 
} 

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

app.component

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h3 class="title">Basic Angular 2</h3> 
    <my-test class="theme-green" ></my-test> 
    <my-test class='theme-red' ></my-test> 
    ` 
}) 
export class AppComponent { 
    constructor(){} 
} 

test.component

01についてもっと読みますここで

@Component({ 
    selector: 'my-test', 
    template: `<h3>Test Component</h3> 
    `, 
styleUrls : ['./app/test.css'] 
}) 
export class TestComponent { 
constructor(){} 
} 

はPlunker!!

は、この情報がお役に立てば幸いです！

Answer 2

あなたは次のように@HostBinding()と組み合わせる:host(...)セレクタを使用することができます。

@Component({ 
    selector: 'my-comp', 
    styles: ` 
    :host([type-default]) { 
    background-color: red; 
    } 

    :host([type-header]) { 
    background-color: blue; 
    } 

    :host([type-main]) { 
    background-color: green; 
    } 
` 
}) 
export class MyComponent { 
    @Input() 
    @HostBinding('component-type') 
    componentType:String="type-default" 
} 

、その後、あなたはまた、あなたの質問のように外部からクラスを適用してから使用することができます

<header> 
    <my-comp componentType="type-header"></my-comp> 
</header> 

<main> 
    <my-comp componentType="type-main"></my-comp> 
</main> 

<my-comp></my-comp> 

のようなスタイルを切り替えます:host(...)セレクタlike

:host(.customStyle1) { 

その後、

@Input() 
    @HostBinding('component-type') 
    componentType:String="type-default" 

この部分は必要ありませんが、あなたは、コンポーネントの他の構成設定とスタイリングを組み合わせたい場合は、この方法が有益であるかもしれません。