Wie wendet man Themen in angular2 an?

Question

Ich muss zwei Themen (rot, blau) für die Web-Anwendung, die ich in eckigen2 entwickeln. Wenn ich das Thema ändere, sollten alle Komponenten es reflektieren?

Was sind die besten Praktiken, um Themen in angular2 anzuwenden?

Answer 1

Ich gehe davon aus, dass es zwei Tasten gibt: eine für rot und andere für blau. Das Design ändert sich basierend auf einem Klick auf den Benutzer.

Assign-Button klicken Ereignisse wie in Ihrem HTML demoed:

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

Angenommen, Sie Thema Änderungsabschnitt hier in div wollen,

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

In Angular 2 Sie haben Klassen für CSS dynamisch zuweisen.

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

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

Nun endlich, in CSS ändern Styling-Klasse nach:

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

Answer 2

Sie die DOCUMENT token von @ Winkel/Plattform-Browser verwenden können, Zugriff auf alle DOM-Element zu gewinnen und dann das Stylesheet Quelle ändern . Unten ist ein einfaches Beispiel.

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