Javascript 本地存储可观测服务上的主题切换器

我在angular应用程序中实现了一个动态主题切换器（带有教程）。它的工作，但当我重新加载网站，选择是不记得了

我读过关于localStorage的文章，我会使用它，但仍然不起作用，因为我不知道如何“在哪里”从这个localStorage获取数据，当我重新加载页面时，主题的选择会被记住

我有以下代码：

主题服务.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));
  }

}

从'@angular/core'导入{Injectable}；
从'rxjs/Subject'导入{Subject}；
@可注射（）
导出类主题服务{
private _themeDark:Subject=新主题（）；
isdark函数（）{
让value=localStorage.getItem（'isDark'）；
此._.next（值）；
返回此项。_themeDark.asObservable（）；
}
isThemeDark=this.isDarkFunction（）；
setDarkTheme（isThemeDark:boolean）{
这个。下一个（isThemeDark）；
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); 
  } 

}

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;

  }

}

从'@angular/core'导入{Component，OnInit}；
从“../services/theme.service”导入{ThemeService}；
从“rxjs/Observable”导入{Observable}；
@组成部分({
选择器：“应用程序导航栏”，
templateUrl:'./navbar.component.html'，
样式URL:['./navbar.component.scss']
})
导出类NavbarComponent实现OnInit{
地峡标志：可见；
建造师(
私有主题服务：主题服务{}
恩戈尼尼特（）{
this.isThemeDark=this.themeService.isThemeDark；
}
toggleDarkTheme（选中：布尔值）{
此.themeService.setDarkTheme（已选中）；
} 
}

应用程序组件.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); 
  } 

}

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;

  }

}

从'@angular/core'导入{Component，OnInit}；
从“rxjs/Observable”导入{Observable}；
从“/services/theme.service”导入{ThemeService}”；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']，
提供者：[主题服务]
})
导出类AppComponent实现OnInit{
地峡标志：可见；
建造师(
公共主题服务：主题服务）{
}
恩戈尼尼特（）{
this.isThemeDark=this.themeService.isThemeDark；
}
}

请帮忙，

---

关于

您可以在theme.service.ts中编写如下内容
我不知道它是否会像现在这样完美地运行，但我的想法是从

isThemeDark（）

中的本地存储读取数据

isThemeDark（）{
让value=localStorage.getItem（'isDark'）；
此._.next（值）；
返回此项。_themeDark.asObservable（）；
}

您可以在theme.service.ts中编写如下内容
我不知道它是否会像现在这样完美地运行，但我的想法是从

isThemeDark（）

中的本地存储读取数据

isThemeDark（）{
让value=localStorage.getItem（'isDark'）；
此._.next（值）；
返回此项。_themeDark.asObservable（）；
}

我认为这是因为当您执行

localStorage.getItem（'isDark'）

时，结果是字符串，而不是布尔值。也许可以试试：

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

---

另外，手动检查本地存储是否在刷新后保留。有些浏览器有一个设置，可以在刷新时清除所有内容。

我认为这是因为当您执行

localStorage.getItem（'isDark'）

时，结果是一个字符串，而不是布尔值。也许可以试试：

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

---

另外，手动检查本地存储是否在刷新后保留。有些浏览器有一个设置，可以在刷新时清除所有内容。

它仍然不起作用。我在帖子中更新了theme.service.ts代码。首先，这个。无论如何，问题在于getItem类型：尝试放置一些console.log以便为下一个方法设置正确的值：）它仍然不起作用。我在帖子中更新了theme.service.ts代码。首先，这个。无论如何，问题在于getItem类型：尝试放置一些console.log，以便为下一个方法设置正确的值：）