Angular 4 Toggle Stylesheets in angular-cli

Question

Ich frage mich, ob es möglich ist, ein Thema (2 Stylesheets) umzuschalten. meine aktuelle Konfiguration ist Stylesheet A in meinem angular-cli.json config. was ich tun möchte, ist das Stylesheet A mit Stylesheet B durch einen einfachen (Klick) Toggler zu ersetzen.

wenn ich würde das Stylesheet in der index.html den Code importieren wie diese

Komponente aussehen:

constructor() { } 

    toggleTheme() { 
    this.darkTheme = this.lightTheme; 
    } 

Index.HTML

<div [class.dark]="darkTheme"> 
<div [class.light]="lightTheme"> 
<button (click)="toggleTheme()"> 
Toggle theme 
</button> 

aber da im Stylesheet Import dark.css in der angular-cli.json-Datei anstelle von index.html, wie kann ich das lösen?

Answer 1

In eckige jede Komponente hat seine eigene Stylesheet-Datei und der Umfang ist nur für die Komponente. Ich denke, dass Sie das Hauptstilesheet in der Indexdatei ändern möchten, aber es hat keinen Kontext oder Bereich, der seit Angular-Komponente geändert werden kann.

Sie können es in Ihrer Hauptkomponente (als gemeinsames Layout) tun. Aber denken Sie daran, dass keine Kinderkomponente den Stylesheet-Bereich haben wird.