如何在angular2中應用主題？

Question

我需要爲我在angular2中開發的Web應用程序提供兩個主題（紅色，藍色）。當我改變主題時，所有組件都應該反映它？

在angular2中應用主題的最佳做法是什麼？

Answer 1

我假設有兩個按鈕：一個用於紅色，另一個用於藍色。主題將根據用戶的按鈕點擊而改變。作爲全世界展示你的HTML

分配按鈕點擊事件：

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

假設你想主題的變化在這裏的div節，

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

在角2，你必須動態地分配類的CSS。

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

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

如今終於，在CSS的變化，根據類造型：

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

Answer 2

可以使用DOCUMENT token從@角/平臺的瀏覽器來訪問所有的DOM元素，然後更改樣式源。下面是一個簡單的例子。

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'); 
    } 
}