Angular LocalStorage Service setter 和 getter 未被识别为函数答案

【问题标题】：Angular LocalStorage Service setter and getters not recognized as functionsAngular LocalStorage Service setter 和 getter 未被识别为函数
【发布时间】：2020-11-13 07:20:17
【问题描述】：

我在 Angular 中为 localStorage 服务创建了一个 setter 和 getter 函数并将其注入我的 home 组件中，但我在导航控制台中收到一个错误 不是函数，我也看不到开发工具应用程序窗口本地存储部分中的任何内容。

LocalStorage Service 已正确注入 App Module。

本地存储服务

import { Inject, Injectable } from '@angular/core';
import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service';

//Types

const GROUPE = "GROUPE";
const ALONE = "ALONE";


@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {

  constructor(@Inject(LOCAL_STORAGE) private storage: StorageService) { }

  setGroupeType(val: boolean) {
    this.storage.set(GROUPE, JSON.stringify(val));
  }
  getGroupeType(): boolean {
    return JSON.parse(this.storage.get(GROUPE));
  }

  setAloneType(val: boolean) {
    this.storage.set(ALONE, JSON.stringify(val));
  }

  getAloneType(): boolean {
    return JSON.parse(this.storage.get(ALONE));
  }
}

HomeComponent.ts

import { Component, OnInit } from '@angular/core';
import { LocalStorageService } from 'src/app/services/local-storage.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  ...
  constructor(private localStorageService: LocalStorageService) { }

  ngOnInit() {
  }

  public setGroupeType() {
    this.localStorageService.setAloneType(false);
    this.localStorageService.setGroupeType(true);
    console.log(this.localStorageService.getGroupeType());
  }

  public setAloneType() {
    this.localStorageService.setGroupeType(false);
    this.localStorageService.setAloneType(true);
    console.log(this.localStorageService.getAloneType());
  }
}

HomeComponent.html

<ng-template #groupSelected>
  <div class="floating">
    <div>
      <input type="text" required />
      <label>Skriv inn gruppekode</label>
      <a [routerLink]="['../type']" (click)="setGroupeType()"><img src="assets/images/arrow-light.svg" /></a>
    </div>
  </div>
</ng-template>
</div>
<div class="col alene">
  <span>Alene</span>
  <a [routerLink]="['../type']" (click)="setAloneType()">
    <img src="assets/images/arrow-light.svg" />
  </a>
</div>

【问题讨论】：

确切的错误信息是什么？
我的 this.localStorageService.getGroupeType() 不是函数错误
也许可以尝试在 stackblitz 上重新创建它，因为它看起来不错。
删除 providedIn: 'root' 并在模块上注册您的服务。错误应该会消失。
今天它工作正常，我认为现金清算延期和重新启动项目是解决方案，因为服务可能需要重新启动才能工作！不确定。 @Steve 我确实保留了它，它工作正常吗？小心解释为什么我应该/不应该保留它。

标签： angular local-storage

【解决方案1】：

基本上就是清空缓存，关闭ng serve的实例再重启。

Ps：为了安全起见，清除缓存。

【讨论】：