각도 2 테마 스위처 로컬 저장 장치

Question

논리적 인 방법으로 해결할 수 없기 때문에 누군가 도와 드릴 수 있기를 바랍니다.

:

내 footercomponent.html 파일과 같이 체크 박스에 '변경'이벤트를 호출 확인 '다크 모드'에 내 응용 프로그램을 전환 내 각도 2 응용 프로그램의 바닥 글에있는 체크 박스를 footercomponent.html

<input id="themeswitch" type="checkbox" name="setting-theme" [(ngModel)]="currentTheme" (change)="checked(no,$event)" /> 

이 참조 테마 B에 테마 A로부터 주제 (라이트 테마) (어둠의 테마)를 설정하는 경우 문을 실행 내 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'); 
     } 

    } 


} 

나는 또한 기본 테마를 포함하고 테마 '서비스'설정이 원하는 테마를 선택하고의 선택에 따라 응용 프로그램에 적용 할 수있는 스위치 문을 실행 이전에 선택된 확인란.

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

} 

그 부분은 잘 작동 그래서 내가, 내가 확인하거나 체크 박스를 체크 해제로 값이 업데이트되는 로컬 저장소 설정 패널에서 브라우저에서 볼 수 있습니다 , 나는 단지 내 머리 속에서 어떻게 작동하는지, 또는 사용자의 체크 박스 선택에 그 값을 적용하기 위해 코드에서 로컬 스토리지의 값을 호출하거나 참조하는 방법을 찾는다.

사용자가 상자를 선택하면 어두운 테마가 적용되고 브라우저를 새로 고침하면 어두운 테마가 계속 선택됩니다. 나는 그것의 각도 애플 리케이션과 그들은 심지어 동적으로로드되는 모든 기능으로 인해 페이지를 새로 고치지 않을 수도 있습니다,하지만 그냥 밖으로 희망, 그래서 희망에서 약간의 도움으로 일하고 싶어 incase 이해하십시오.

정말로 감사드립니다.

Answer 1

FooterComponent에 대한 ngOnInit에서 localStorage를 읽고 해당 값을 기반으로 테마를 설정할 수 있습니다 (있는 경우). 의 라인을 따라

뭔가 :

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