2017-05-03 84 views
0

我試圖把的WebSQL API與離子3,用角4HTML5 Websql-如何使用離子3和4角

var db = openDatabase('mydb', '', 'my first database', 2 * 1024 * 1024); 

當我調用的openDatabase,它顯示的openDatabase不是功能和頁面沒有加載。但在瀏覽器中,我可以看到創建的表格。

有沒有一種方法可以使用它角4和離子3?

我加了cordova-sqllite-storage。但是我無法在Angular4上調用它。

任何示例?我不想使用SQLLite與離子本地,因爲這個插件不運行在瀏覽器上。

回答

0

您可以使用以下方法。

let db = (<any> window).openDatabase('mydb', '', 'my first database', 2 * 1024 * 1024); 
+3

_why_你相信這就是答案? _它是如何工作的?僅僅告訴某人在沒有任何語境或意義的情況下改變他們的代碼並不能幫助他們瞭解他們做錯了什麼。 – GrumpyCrouton

+0

請描述您的答案以更好地瞭解此 – sandeep

0

我真的鼓勵,看看如何添加插件: https://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module

在我們的例子中,我們想通過我們的WebSQL實施開發(瀏覽器測試)的目的交換本地的SQLite。

{provide: SQLite, useClass: SQLiteMock} 

爲此,我們必須在提供者部分的app.module.ts中添加上述行。

下面的代碼保存爲外部打字稿文件,並實現SQLite插件(本例中爲'create()')的默認方法。 SQLiteObject正在實現executeSql()方法。

import {SQLiteDatabaseConfig} from "@ionic-native/sqlite"; 

    class SQLiteObject { 
    db: any; 

    constructor(db: any) { 
     this.db = db; 
    }; 

    executeSql(queryStatement: string, params: any): Promise<any> { 
     return new Promise((resolve, reject) => { 
     this.db.transaction((tx) => { 
      tx.executeSql(queryStatement, params, 
      (tx, result) => { 
       resolve(result) 
      }, 
      (error) => reject(error)); 
     }); 
     }); 
    } 
    } 

    export class SQLiteMock { 
    public create(config: SQLiteDatabaseConfig): Promise<SQLiteObject> { 
     var db = (<any> window).openDatabase('mydb', '', 'my first database', 2 * 1024 * 1024); 

     return new Promise((resolve, reject) => { 
     resolve(new SQLiteObject(db)); 
     }); 
    } 
    } 

現在u能正常使用遵循離子教程 https://ionicframework.com/docs/native/sqlite/

+0

請考慮添加並解釋爲什麼此代碼有效。 –