Ion-刷新后切换它必须从本地存储中取回数据

Question

所以我有个问题。我的目标是:我在我的应用程序中创建了一个黑色/浅色主题。因此，只要我点击切换，应用程序的主题就会变成黑色，如果我刷新它，它就会保持黑色，如果我把它重新打开，它就会重新变亮，它会一直亮着。但我的努力是，每当我刷新页面时，切换不会停留在当前状态，如在->黑色主题和关闭->轻主题

因此，在->黑色主题关闭->轻主题

Settings.HTML

<ion-item>>
    <ion-label>Light/Dark</ion-label>
    <ion-toggle [(ngModel)]="lightDark" [checked]="" (ionChange)="toggleAppTheme()"></ion-toggle>
</ion-item>

Settings.TS

 constructor(public navCtrl: NavController,
            public navParams: NavParams,
            private settings: SettingsProvider) {
    this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);

    console.log("Toggled: "+ this.lightDark);
}

toggleAppTheme() {
    if (this.selectedTheme == 'light-theme') {

        this.settings.setActiveTheme('dark-theme');
        localStorage.setItem("themeColor", this.selectedTheme);

    } else if (this.selectedTheme == 'dark-theme') {

        this.settings.setActiveTheme('light-theme');
        localStorage.setItem("themeColor", this.selectedTheme);

    }
}

App.Component.ts

 // Dark/Light Mode
    if(localStorage.getItem("themeColor") == "dark-theme")
    {

        this.settings.setActiveTheme("dark-theme");


    }
    else if(localStorage.getItem("themeColor") == "light-theme")
    {

        this.settings.setActiveTheme("light-theme");

    }

Answer 1

ion-toggle组件绑定到lightDark属性，但我没有看到您在初始化页面时设置它的初始值：

constructor(public navCtrl: NavController,
            public navParams: NavParams,
            private settings: SettingsProvider) {

    this.settings.getActiveTheme().subscribe(
        val => {
            this.selectedTheme = val;

            // Initialize the state of the toggle
            // It should be true if the theme is the dark one, right?
            this.lightDark = this.selectedTheme === 'dark-theme';     

            // Show the value in the console to see if it works 
            console.log("Toggled: "+ this.lightDark);       
        },
        error => {
            // Handle the error...
        });
}