问题描述
从长远来看,我使用 Ionic Storage 来存储数据。现在我想在进入统计页面时检索数据,所以我调用了我制作的服务并在统计页面的 ngOnInit 中编写了方法,但如果我正确理解了这个问题,它就无法识别存储类的实例化但奇怪的是,当我在 ionViewWillEnter() 中编写方法时它确实有效。我使 ngOnInit 和 ionViewWillEnter 异步,但我仍然收到 ngOnInit 错误。如果我没有错的话,我可以使用 ionViewWillEnter 技巧,它类似于在我的用例中调用 ngOnInit 中的方法,但我仍然很好奇为什么它会导致我出错......
import { StatsService } from './../service/stats.service';
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-statistics',templateUrl: './statistics.page.html',styleUrls: ['./statistics.page.scss'],})
export class StatisticsPage implements OnInit {
testsAmount: any = 0;
constructor(public statsService: StatsService) {}
addJohn(){
this.statsService.set("1","john");
}
removeAll(){
this.statsService.clearall();
}
async getJohn(){
console.log(await this.statsService.get("1"));
}
async ngOnInit() {
await this.statsService.set("testSetngOnInit","blabla");
console.log("testSet initialized from the ngOnInit");
console.log(await this.statsService.get("testSetngOnInit"));
}
async ionViewWillEnter(){
await this.statsService.set("testSetionViewWillEnter","blabla");
console.log("testSet initialized from the ionViewWillEnter");
console.log(await this.statsService.get("testSetionViewWillEnter"));
}
}
服务的TS:
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';
import * as CordovasqliteDriver from 'localforage-cordovasqlitedriver';
@Injectable({
providedIn: 'root'
})
export class StatsService {
// private _storage: Storage | null = null;
private _storage: Storage;
constructor(public storage: Storage) {
this.init();
}
async init() {
// If using,define drivers here: await this.storage.defineDriver(/*...*/);
await this.storage.defineDriver(CordovasqliteDriver);
const storage = await this.storage.create();
this._storage = storage;
}
async keyExistence(key: string){
if(await this.get(key) == null){
return false;
}
else{
return true;
}
}
// Create and expose methods that users of this service can
// call,for example:
async set(key: string,value: any) {
await this._storage?.set(key,value);
}
async clearall() {
await this._storage.clear();
}
async get(key: string) {
return await this._storage.get(key);
}
}
还有我的 IndexDB :
提前致谢!
解决方法
错误消息表明 stats.service.ts 中的第 44 行是导致问题的行。您的组件 ngOnInit
确实正在访问服务实例,但服务本身失败了。我想这是因为 StatsService
的构造函数正在调用 this.init();
,但是构造函数没有等待它(我认为它不能)。因此,当您尝试尽早访问它时(在 ngOnInit 中)this._storage
尚未初始化。
statsService.set
似乎成功的原因是因为该方法调用了 this._storage?.set(key,value)
- 注意 ?
是一个空条件,这意味着如果 _storage
为空,那么整个表达式计算为 null
。
我不确定,但我假设 ionViewWillEnter
在组件生命周期的后期被调用,并且 stats 服务构造函数有足够的时间来完全初始化。另一方面,在组件构造函数之后调用 ngOnInit
。
好的,我找到了答案!这个其实解决起来很简单,傻到没去想…… 因此,您不必在自己的类中实例化服务,而必须在使用它的类中实例化它,因此在我的情况下:
我在服务构造函数中的内容:
constructor(public storage: Storage) {
this.init();
}
但问题是构造函数不能使用 async 语句,所以你不能告诉你的类等待它,所以你需要的是使用它在类的 ngOnInit 中初始化:
我使用该服务的页面:
async ngOnInit() {
await this.statsService.init();
}
希望这会帮助一些人:)
,在您的 AppComponent 中调用 init 以创建存储实例。这应该只调用一次。
export class AppComponent implements OnInit,{
constructor(
private storage: StorageService
) {}
async ngOnInit() {
await this.storage.init();
}