プログラムで角度2のコンポーネントにスタイルを適用するにはどうすればよいですか？

Question

私はいくつかの変数に応じて適用できる4つの異なるスタイルのファイルを持つコンポーネントを持っています。レンダリングする前に、そのコンポーネントのスタイルをどのように適用できますか？

@Component({ 
    selector: 'settings-editor', 
    templateUrl: './settings-editor.component.html', 
    styleUrls: [ './a.less', './b.less' , './c.less' ] 
}) 
export class SettingsEditorComponent implements OnInit { 
    @Input() 
    public styleType: string; 


    ngOnInit() { 
    if (this.styleType === 'A') { 
     // Apply styles from a.less only 

    } 
    } 


} 

Answer 1

スタイルは、したがって、あなたは、実行時にできることは何もない、あなたがアプリを展開する前にこれが行われるIBMアカデミー角度によってとしてコンパイルされています。 AoTがなければ、これはうまくいくかもしれませんが、私はそれについてはわかりません。

一つの方法は、ちょうどそれらすべてを追加し、ギュンターが正しいセレクタ

:host(.style1) { 
    ... 
} 

:host(.style1) { 
    ... 
} 

class MyComponent { 
    style:string = 'style2'; 
    @HostBinding('class.style1') style1:boolean = style == 'style1'; 
    @HostBinding('class.style2') style2:boolean = style == 'style2'; 
} 

Answer 2

を使用してそれらを切り替えることであろう。このような戦略を実装するPlunkerがあります：https://plnkr.co/edit/LfjCS6DMSi8d44O4Uhkj?p=preview

私は実際にwrote a blog post on dynamically styling componentsと私はこの可能性を忘れました。それを追加するつもりです。

これを単一のコンポーネントに限定する必要はなく、むしろ「グローバル」テーマストーリーの場合は、CSSレベルでこれを処理することもできます。例えば、style1.cssには片道に書かれたCSSクラスcard、もう一方はstyle2.cssにあるようなものです。

また、Angular Material 2 repoも調べてみます。彼らはまたtheming on the official siteについて話します。