Ionic 4 存储问题：没有存储提供程序

Question

我尝试在我的 ionic 项目中导入存储模块。但是当我添加供应商存储时，错误发生了变化。错误变为“无法解决全部存储：（？）” 我该如何解决这个错误？你能帮我吗？我在下面写了我的代码。我看了这个视频 :https://www.youtube.com/watch?v=h_IhS8QQjUA&list=PLNFwX8PVq5q7S-p_7zO99xdauhDsnMPw0&index=17&t=0s

应用模块 ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {Storage} from '@ionic/storage';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule  } from '@ionic/storage';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,IonicStorageModule.forRoot()],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

页面 TS

import { Component, ViewChild } from "@angular/core";
import { StorageService, Item } from "../services/storage.service";
import { Platform, ToastController, IonList } from "@ionic/angular";
@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"]
})
export class HomePage {
  items: Item[] = [];
  newItem: Item = <Item>{};
  @ViewChild("mylist") mylist: IonList;

  constructor(
    private storageService: StorageService,
    private plt: Platform,
    private toastController: ToastController
  ) {
    this.plt.ready().then(() => {
      this.loadItems();
    });
  }

  loadItems() {
    this.storageService.getItems().then(items => {
      this.items = items;
    });
  }

  addItem() {
    this.newItem.modified = Date.now();
    this.newItem.id = Date.now();

    this.storageService.addItem(this.newItem).then(item => {
      this.newItem = <Item>{};
      this.showToast("Item Added");
      this.loadItems();
    });
  }

  updateItem(item:Item){
    item.title='UPDATED:${item.title}';
    item.modified=Date.now();
    this.storageService.updateItem(item).then(item=>{
      this.showToast("Item Updated");
      this.loadItems();
    });
  }

  deleteItem(item:Item){
    this.storageService.deleteItem(item.id).then(item=>{
      this.showToast("Item Deleted");
      this.mylist.closeSlidingItems();
      this.loadItems();
    });
  }

  async showToast(msg){
    const toast=await this.toastController.create({
      message:msg,
      duration:2000
    });
    toast.present();
  }
}

服务

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

export interface Item{
  id:number,
  title:string,
  value:string,
  modified:number
}
const ITEMS_KEY="my-items";
@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor(private storage:Storage) { }

  addItem(item:Item):Promise<any>{
    return this.storage.get(ITEMS_KEY).then((items:Item[])=>{
      if(items){
        items.push(item);
        return this.storage.set(ITEMS_KEY,items);
      }else{
        return this.storage.set(ITEMS_KEY,[item]);
      }
    });
  }
  getItems():Promise<Item[]>{
    return this.storage.get(ITEMS_KEY);
  }
  getItem(id:number){

  }
  updateItem(item:Item):Promise<any>{
    return this.storage.get(ITEMS_KEY).then((items:Item[])=>{
      if(!items || items.length==0){

        return null;
      }

      let newItems:Item[]=[];
      for (let i of items){
        if(i.id==item.id){
          newItems.push(item);
        }else{
            newItems.push(i);
        }
      }
      return this.storage.set(ITEMS_KEY,newItems);
    });
  }

  deleteItem(id:number):Promise<Item>{
    return this.storage.get(ITEMS_KEY).then((items:Item[])=>{
      if(!items || items.length==0){

        return null;
      }

      let toKeep:Item[]=[];
      for (let i of items){
        if(i.id!=id){
          toKeep.push(i);
        }else{
            //newItems.push(i);
        }
      }

      return this.storage.set(ITEMS_KEY,toKeep);
    });
  }
}

Answer 1

在 StorageService 文件中，您要像这样注入 storage：

constructor(private storage: Storage) { }

但我看不到 Storage 被导入到该文件中。所以在构造函数中注入的 Storage class 指的是 Web Storage API 而不是 Ionic 的 Storage.

要解决此问题，请从 @ionic/storage:

导入 Storage

import { Storage } from '@ionic/storage';

// ...

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

  constructor(private storage: Storage) { }

  // ...

}

Answer 2

正在安装

npm install @ionic/storage
npm install @ionic/storage-angular

记得在服务中创建您的存储空间

import { Storage } from '@ionic/storage';

constructor(private storage:Storage){
this.storage.create();
}

并将其导入 app.module

import { IonicStorageModule } from '@ionic/storage-angular';
import { Storage } from '@ionic/storage';

在您的提供商中存储

providers: [{ provide: RouteReuseStrategy},Storage],

ionic-storage angular

Ionic 4 存储问题：没有存储提供程序

Ionic 4 storage problem : No provider for Storage

ionic-framework

ionic4

angular7