角2テーマスイッチャーローカルストレージ

Question

私は論理的にそれを行う方法を考えることができないので、誰かが私にこれを手伝ってくれることを願っています。

：

私は私のfootercomponent.htmlファイルにそのようなチェックボックスの[変更]イベントを呼び出し、チェックし「ダークモード」に私のアプリを切り替えて、私の角度2のアプリフッター、チェックボックスを持っていますfootercomponent.html

この参照は、テーマBにテーマAからのテーマ（光テーマ）（暗いテーマ）を設定するためにif文を実行し、私のfootercomponent.tsファイル内の関数「をチェックします」。また、値AまたはBを、テーマ：Aまたはテーマ：Bと呼ばれるキー値ペアの下のローカルストレージに追加します。チェックボックスがオンになっているかどうかによって異なります。テーマの変更はすごくうまくいっていますが、ローカルストレージの価値を思い出してどこかに適用する方法を知っていると私は困惑しています。

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

    } 


} 

私はデフォルトのテーマが含まれており、また、所望のテーマを選択してから、選択に応じてアプリにそれを適用するためにswitch文を実行したテーマ「サービス」のセットアップを持っています以前に選択されたチェックボックス

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

} 

その一部が正常に動作しているので、私は、私がチェックするか、チェックボックスのチェックを外して値が更新されているローカルストレージ設定パネルで私のブラウザで見ることができます私の頭の中で私はちょうどどこで、どのように呼び出すか、コード内のローカル記憶域からその値を参照して、その値がユーザーのチェックボックスの選択に当てはまるかどうかを判断します。

ユーザーがボックスにチェックを入れると、ダークテーマが適用され、ブラウザがリフレッシュされてもダークテーマが選択されたままになります。私は、その角度のアプリケーションと彼らは動的にロードされているすべての機能のためにページを更新することはできませんが、ちょうど私がうまくいけば、SOの少しの助けを借りてこれを動作させたいと思います。

ありがとう、本当にありがとうございます。

Answer 1

FooterComponentのngOnInitでは、localStorageから読み込んで、その値に基づいてテーマを設定できます（存在する場合）。線に沿って

何か：

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