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

Posted 2023-03-13

【中文标题】Ion-Toggle 刷新后它必须从本地存储中取回数据

【英文标题】：Ion-Toggle After Refresh it has to get data back from local storage

【发布时间】：2019-03-03 06:14:38

【问题描述】：

所以我有一个问题。 我的目标是：我在我的应用程序中制作了黑色/浅色主题。因此，每当我单击切换时，应用程序的主题就会变为黑色，如果我刷新它会保持黑色，如果我将其转回 OFF，它会变回亮起并保持亮起。但我的挣扎是，每当我刷新页面时，切换不会停留在当前状态为 ON -> black theme 和 OFF -> Light Theme

So ON -> 黑色主题 关闭 -> 浅色主题

设置.html

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

设置.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");

    

【问题讨论】：

你能解决这个问题吗？

【参考方案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...
        );