Question

我希望有人可以帮我解决这个问题，因为我无法从逻辑上解决这个问题。

我的Angular 2应用页脚中有一个复选框，可以将我的应用切换到“暗模式”＃39;选中后，请拨打“更改”状态。复选框上的事件就像在我的footercomponent.html文件中一样：

footercomponent.html

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

此参考文献＆＃39;已检查＆＃39;在我的footercomponent.ts文件中运行，该文件运行if语句将主题从主题A（灯光主题）设置为主题B（黑暗主题）。然后，它还将值A或B添加到名为theme：A或theme：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');
        }

    }


}

我有一个主题＆＃39; Service＆＃39;设置包含默认主题，并运行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);
  }
}

Angular 2主题切换器本地存储

1 个答案: