angular2でテーマを適用するには？

Question

私はangular2で開発しているWebアプリケーションに2つのテーマ（赤、青）を提供する必要があります。テーマを変更すると、すべてのコンポーネントに反映されますか？

angular2でテーマを適用するベストプラクティスは何ですか？

Answer 1

私は、赤と青の2つのボタンがあると仮定しています。テーマは、ユーザーのボタンクリックに基づいて変更されます。

AssignボタンのクリックイベントあなたのHTMLにデモとして：

<button (click)="Red()">Red</button> 
<button (click)="Blue()">Blue</button> 

あなたはCSSのクラスを動的に割り当てる必要が角度2で

<div id="div1"> 
--- 
</div> 

、あなたはここでのdivセクションのテーマの変更をするとします。

さて最後に、CSSの変更では、クラスに応じてスタイリング

Red(){ 
document.getElementById('div1').className= 'redClass'; //notice id of div is div1 
} 

Blue(){ 
document.getElementById('div1').className='blueClass'; 
} 

：

div.redClass { 
    background-color :red; 
} 
div.blueClass { 
    background-color :blue; 
} 

Answer 2

あなたはすべてのDOM要素にアクセスするために、角/プラットフォームブラウザ@からDOCUMENT tokenを使用して、スタイルシートのソースを変更することができます。以下は簡単な例です。

import { Component, Inject } from '@angular/core'; 
import { DOCUMENT } from '@angular/platform-browser'; 

@Component({}) 
export class SomeComponent { 

    constructor (@Inject(DOCUMENT) private document) { } 

    Light() { 
     this.document.getElementById('theme').setAttribute('href', 'light.css'); 
    } 
}