Ion-Toggle После обновления он должен вернуть данные из локального хранилища - PullRequest
Новая
       5

Ion-Toggle После обновления он должен вернуть данные из локального хранилища

0 голосов
/ 27 сентября 2018

Так что у меня есть проблема.Моя цель: я сделал Черную / Светлую тему в своем приложении.Поэтому всякий раз, когда я нажимаю на переключатель, тема приложения меняется на черный, и если я обновляю, он остается черным, а если я возвращаю его в положение ВЫКЛ, он снова загорается и остается на свету.Но моя борьба - всякий раз, когда я обновляю страницу, переключатель не остается в текущем состоянии как ВКЛ -> черная тема и ВЫКЛ -> Светлая тема

Итак ВКЛ -> Черная тема ВЫКЛ -> Светлая тема

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");

    }

1 Ответ

0 голосов
/ 28 сентября 2018

Компонент 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...
        });
}
...