Ionic2 cordova-sqlite-storage：如何将 SQLite 用作服务

Question

我正在尝试将 Ionic 2 中的 Cordova 插件 sqlite 用作服务。

项目构建，但运行一个空白页面。

这是我在 android logcat 中看到的与此相关的内容：

10-29 02:15:11.082 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "EXCEPTION: No provider for t!", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.082 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "ORIGINAL STACKTRACE:", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.082 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "Error: DI Error
                                               at e.Error (<anonymous>)
                                               at e (file:///android_asset/www/build/main.js:5:5322)
                                               at e (file:///android_asset/www/build/main.js:5:10802)
                                               at new e (file:///android_asset/www/build/main.js:5:11130)
                                               at t._throwOrNull (file:///android_asset/www/build/main.js:5:28341)
                                               at t._getByKeyDefault (file:///android_asset/www/build/main.js:5:28697)
                                               at t._getByKey (file:///android_asset/www/build/main.js:5:28252)
                                               at t.get (file:///android_asset/www/build/main.js:5:24608)
                                               at e.get (file:///android_asset/www/build/main.js:7:16300)
                                               at e.get (file:///android_asset/www/build/main.js:8:3564)", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.092 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "EXCEPTION: No provider for t!", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.092 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "ORIGINAL STACKTRACE:", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.092 8010-8010/? I/chromium: [INFO:CONSOLE(5)] "Error: DI Error
                                               at e.Error (<anonymous>)
                                               at e (file:///android_asset/www/build/main.js:5:5322)
                                               at e (file:///android_asset/www/build/main.js:5:10802)
                                               at new e (file:///android_asset/www/build/main.js:5:11130)
                                               at t._throwOrNull (file:///android_asset/www/build/main.js:5:28341)
                                               at t._getByKeyDefault (file:///android_asset/www/build/main.js:5:28697)
                                               at t._getByKey (file:///android_asset/www/build/main.js:5:28252)
                                               at t.get (file:///android_asset/www/build/main.js:5:24608)
                                               at e.get (file:///android_asset/www/build/main.js:7:16300)
                                               at e.get (file:///android_asset/www/build/main.js:8:3564)", source: file:///android_asset/www/build/main.js (5)
10-29 02:15:11.102 8010-8010/? I/chromium: [INFO:CONSOLE(3)] "Error: No provider for t!", source: file:///android_asset/www/build/polyfills.js (3)

我的 ionic 文件是这样的： "[我的项目]\src\services\sql-settings\sql-settings.ts":

import { Injectable } from '@angular/core';
import { SQLite } from 'ionic-native';

@Injectable()
export class SqlSettingsService {

    constructor(
        public db: SQLite
    ) {     
        this.db = new SQLite();
    }

    openDb(){
        return this.db.openDatabase({
             name: 'data.db',
             location: 'default' // the location field is required
        });
    }

}

"[我的项目]\src\app\app.module.ts":

import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { SqlSettingsService } from '../services/sql-settings/sql-settings';



@NgModule({   declarations: [
    MyApp,
    HomePage   ],   imports: [
    IonicModule.forRoot(MyApp)   ],   bootstrap: [IonicApp],   entryComponents: [
    MyApp,
    HomePage   ],   providers: [SqlSettingsService] }) export class AppModule {}

最后是“[我的项目]\src\app\app.component.ts”：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';


import { SqlSettingsService } from '../services/sql-settings/sql-settings';


@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`,
  providers: [SqlSettingsService]
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform, sqlSettingsService: SqlSettingsService) {


    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();

      sqlSettingsService.openDb().then(
        ()=>{alert("OPEN DB IS SUCCESSFUL")},
        (err)=>{alert('Unable to open database: ' + err)}
      );


    });
  }
}

Answer 1

你为什么要这样做？

constructor(public db: SQLite) {     
   this.db = new SQLite();
}

这是没有意义的。 1、没有provider，无法注入。 2. 即使它被注入了，你也给它分配了一些新的东西。无意义。你可能想要做的是

db: SQLite;

constructor() {
  this.bd = new SQLite();
}

Answer 2

没必要

public db: SQLite
) {     
    this.db = new SQLite();
}

只需在 app.module.ts 文件中使用它

import { SqlSettingsService } from '../services/sql-settings/sql-settings';

并在提供程序中使用 SqlSettingsService