时间戳

首页 > 解决方案 > Angular LocalStorage Service setter 和 getter 不被识别为函数

angular - Angular LocalStorage Service setter 和 getter 不被识别为函数

问题描述

我为 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));
  }
}

主页组件.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());
  }
}

主页组件.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>

标签： angularlocal-storage

解决方案

基本上只是清除缓存，关闭 ng serve 的实例并重新启动。

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

推荐阅读