Переключатель тем на локальном хранилище наблюдаемого сервиса - PullRequest
Новая
       8

Переключатель тем на локальном хранилище наблюдаемого сервиса

0 голосов
/ 10 января 2019

Я реализовал динамическое переключение тем (с учебником) в моем угловом приложении. Это работает, но когда я перезагружаю сайт, выбор не запоминается.

Я читал о localStorage, и я буду его использовать, но все еще не работает, потому что я не знаю, как «откуда» мне получить данные из этого localStorage, что выбор темы будет запомнен при перезагрузке страницы .

У меня есть этот код:

theme.service.ts новая версия 

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';


@Injectable()
export class ThemeService {
  private _themeDark: Subject<boolean> = new Subject<boolean>();

  isDarkFunction() {
let value = localStorage.getItem('isDark');
this._themeDark.next(value);
return this._themeDark.asObservable();
  }

  isThemeDark = this.isDarkFunction();

  setDarkTheme(isThemeDark: boolean) {
    this._themeDark.next(isThemeDark);
    localStorage.setItem('isDark', JSON.stringify(isThemeDark));
  }

}

navbar.component.html 

<div class="container-fluid switcher-container">
    <mat-slide-toggle [checked]="isThemeDark | async" (change)="toggleDarkTheme($event.checked)">Dark theme</mat-slide-toggle> 
</div>

navbar.component.ts 

import { Component, OnInit } from '@angular/core';
import { ThemeService } from '../services/theme.service'; 
 import { Observable } from 'rxjs/Observable'; 

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  isThemeDark: Observable<boolean>; 

  constructor(
    private themeService: ThemeService) { }

  ngOnInit() {
    this.isThemeDark = this.themeService.isThemeDark; 
  }

  toggleDarkTheme(checked: boolean) { 
    this.themeService.setDarkTheme(checked); 
  } 

}

app.component.ts 

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs/Observable"; 
import { ThemeService } from "./services/theme.service"; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [ThemeService]
})
export class AppComponent implements OnInit {

  isThemeDark: Observable<boolean>; 


  constructor(
    public themeService: ThemeService) {

    }

  ngOnInit() {
  this.isThemeDark = this.themeService.isThemeDark;

  }

}

Пожалуйста, помогите, Привет

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Я думаю, это потому что вы, когда вы делаете localStorage.getItem('isDark'), в результате получается строка, а не логическое значение. Может быть, попробуйте: 

let value = JSON.parse(localStorage.getItem('isDark')) === true;

Также проверьте вручную, сохраняется ли локальное хранилище после обновления. В некоторых браузерах есть настройка для очистки всего при обновлении.

0 голосов
/ 10 января 2019

Вы можете написать что-то вроде следующего в theme.service.ts .
Я не знаю, будет ли он работать безупречно, как есть, но идея состоит в том, чтобы прочитать из localalstorage в isThemeDark(). 

isThemeDark() {
    let value = localStorage.getItem('isDark');
    this._themeDark.next(value);
    return this._themeDark.asObservable();
}
...