Angular 2 Theme Switcher Local Speicher

Question

Ich hoffe, jemand kann mir dabei helfen, da ich nicht logisch herausfinden kann, wie es geht.

Ich habe eine Checkbox in meinem Angular 2 app Footer, die meine App schaltet auf 'Dark Mode' Wenn diese Option aktiviert, die 'Change' Ereignis auf die Checkbox wie so in meiner footercomponent.html Datei aufrufen:

footercomponent.html

Diese Referenzen ‚geprüft‘ Funktion in meiner footercomponent.ts Datei, die eine if-Anweisung ausgeführt wird, das Thema von Thema A (Licht Thema) zum Thema B (dunkles Thema) einzustellen. Es fügt dann dem lokalen Speicher unter einem Schlüsselwertpaar theme: A oder theme: B den Wert A oder B hinzu, je nachdem, ob das Kontrollkästchen aktiviert ist. Thema Änderung funktioniert alles gut, aber zu wissen, wie man sich an den Wert im lokalen Speicher erinnert und es irgendwo anwendet, verwirrt mich.

footercomponent.ts

export class FooterComponent implements OnInit { 

    constructor(public settings: SettingsService, public themes: ThemesService,) { 

    } 

    ngOnInit() { 

    } 

    // Theme Switch 
    checked(value,event){ 

     if(event.target.checked){ 
      this.themes.setTheme('B'); 
      //Add Theme value to local storage 
      localStorage.setItem('theme', 'B'); 
      // document.getElementById("myCheck").checked = true; 
     } 
     else if (!event.target.checked){ 
      this.themes.setTheme('A'); 
      //Add Theme value to local storage 
      localStorage.setItem('theme', 'A'); 
     } 

    } 


} 

Ich habe ein Thema ‚Service‘ Setup, die das Standard-Theme enthält und betreibt auch eine Switch-Anweisung das gewünschte Thema und es auf App je nach Wahl zur Auswahl das zuvor ausgewählte Kontrollkästchen.

theme.service.ts

const themeA = require('../../shared/styles/themes/theme-a.scss'); 
const themeB = require('../../shared/styles/themes/theme-b.scss'); 


@Injectable() 
export class ThemesService { 

    styleTag: any; 
    defaultTheme: string = 'A'; 



    constructor() { 
     this.createStyle(); 
     this.setTheme(this.defaultTheme); 
    } 



    private createStyle() { 
     const head = document.head || document.getElementsByTagName('head')[0]; 
     this.styleTag = document.createElement('style'); 
     this.styleTag.type = 'text/css'; 
     this.styleTag.id = 'appthemes'; 
     head.appendChild(this.styleTag); 
    } 

    setTheme(name) { 

     switch (name) { 
      case 'A': 
       this.injectStylesheet(themeA); 

       break; 
      case 'B': 
       this.injectStylesheet(themeB); 

       break; 
     } 
    } 

    injectStylesheet(css) { 
     this.styleTag.innerHTML = css; 
    } 

    getDefaultTheme() { 
     return this.defaultTheme; 
    } 

} 

ich sehe in meinem Browser im lokalen Speichereinstellungen, die die Werte aktualisiert werden, wie ich das Kontrollkästchen aktivieren oder deaktivieren, so dass ein Teil in Ordnung arbeiten , Kann ich einfach in meinem Kopf nicht herausfinden, wo oder wie ich den Wert aus dem lokalen Speicher in meinem Code aufrufen oder referenzieren soll, um diesen Wert auf die Checkbox-Auswahl des Benutzers anzuwenden, wenn das sinnvoll ist?

Wenn also ein Benutzer die Box ankreuzt, wird das dunkle Thema angewendet, wenn das Browserfenster aktualisiert wird, ist das dunkle Thema immer noch ausgewählt. Ich verstehe, dass es eine eckige App ist und sie möglicherweise nicht einmal die Seite aktualisieren, da alle Funktionen dynamisch geladen sind, aber nur wenn ich das gerne ausarbeiten würde, hoffentlich mit ein bisschen Hilfe von SO.

Danke Jungs, wirklich jede Unterstützung zu schätzen.

Answer 1

In Ihrem ngOnInit für Ihre FooterComponent könnten Sie von localStorage lesen und Ihr Thema basierend auf diesem Wert festlegen, falls es existiert.

Etwas entlang der Linien von:

ngOnInit() { 
    let storedTheme = localStorage.getItem('theme'); 
    if (storedTheme) { 
    this.themes.setTheme(storedTheme); 
    } 
}