提供商中的 ionic 3 本机存储

Question

我在提供程序中植入了 cordova 模块 "native storage"。但我无法发送和检索存储在本机存储中的变量值。这是我的代码：

第parameter.html

页

<ion-header>

  <ion-navbar>
    <ion-title>Paramétres</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

    <ion-list>
    <ion-list-header>Connection Serveur</ion-list-header>
        <ion-item-group margin-bottom>
          <ion-item>
            <ion-input type="text" placeholder="Adresse du serveur" [(ngModel)]="linkServer"></ion-input>
            </ion-item>
            <ion-item>
            <ion-input type="text" placeholder="Nom d'utilisateur" [(ngModel)]="user"></ion-input>
            </ion-item>
            <ion-item>
            <ion-input type="text" placeholder="Mot de passe" [(ngModel)]="password"></ion-input>
          </ion-item>
        </ion-item-group>

        <ion-list-header>Options</ion-list-header>
        <ion-item-group margin-bottom>
        <ion-item>
                <ion-label>Message de bienvenue</ion-label>
                <ion-toggle [(ngModel)]="bienvenue"></ion-toggle>
            </ion-item>
            <ion-item>
                <ion-label>Notification</ion-label>
                <ion-toggle [(ngModel)]="notification"></ion-toggle>
            </ion-item>
            <ion-item>s
                <ion-label>Vibration</ion-label>
                <ion-toggle [(ngModel)]="vibration"></ion-toggle>
            </ion-item>
        </ion-item-group>

        <button ion-button outline color="dark" style="width: 100%" (tap)="aPropos()">A Propos</button>
    <br />
    <button ion-button full color="dark" (tap)="this.paramService.savePref()">Enregistrer</button>

    <button ion-button full color="dark" (tap)="this.paramService.loadPref()">Charger</button>
    </ion-list>

</ion-content>

第Parameter.ts

页

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';

import { ParamProviders } from '../../providers/paramProviders';

/**
 * Generated class for the ParameterPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-parameter',
  templateUrl: 'parameter.html',
})

export class ParameterPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController, public paramService: ParamProviders) {
  this.paramService.linkServer;
  this.paramService.user;
  this.paramService.password;
  this.paramService.bienvenue;
  this.paramService.notification;
  this.paramService.vibration;
  }



  ionViewDidLoad() {
  }

  // ionViewWillEnter() {
  //   this.paramService.loadPref()
  // }

  // ionViewWillLeave() {
  //   this.paramService.preferences()
  // }

  aPropos() {
    let alert = this.alertCtrl.create({
      title: 'A Propos',
      message: '<b><u>Created by :</u></b> Mezergues Romain et Thierry.<br /><b><u>Verson :</b></u> 1.00<br /><b><u>Site web :</b></u> <a>http://hackeet.com</a><br /><b><u>Email:</u></b> <email>r.mezergues@protonmail.ch</email>',
      buttons: ['Ok']
    });
    alert.present()
  }


}

paramProvider.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

import { NativeStorage } from '@ionic-native/native-storage';

/*
  Generated class for the PeopleSearch provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class ParamProviders {

    linkServer: string ;
    user: string;
    password: string;
    bienvenue: boolean;
    notification: boolean;
    vibration: boolean;

  constructor(public http: Http, private nativeStorage: NativeStorage) {
  }

public savePref(): void {
    this.nativeStorage.setItem('storage_pref', {
        linkServer: this.linkServer,
        user: this.user,
        password: this.password,
        bienvenue: this.bienvenue,
        notification: this.notification,
        vibration: this.vibration
    })
    .then(
      () => console.log(this.linkServer),
      error => console.error('Error storing item', error)
    );
}

public loadPref():void {
  this.nativeStorage.getItem('storage_pref')
    .then(
      data => {
        this.linkServer = data.linkServer;
        this.user = data.user;
        this.password = data.password;
        this.bienvenue = data.bienvenue;
        this.notification = data.notification;
        this.vibration = data.vibration;
      },
      error => console.error(error)
  );
}

  // load() {
  //   if (this.data1) {
  //     return Promise.resolve(this.data1);
  //   }
  //   // Dont have the data yet
  //   return new Promise(resolve => {
  //     this.http.get('./assets/json/parameter.json')
  //       .map(res => res.json())
  //       .subscribe(data => {
  //         this.data1 = data;
  //         resolve(this.data1);
  //       });
  //   });
  // }  

}

我在浏览器或本机编译时没有错误。我希望在填写表单时，将值传输并保存在 "paramProviders.ts" 中的本机存储中，然后检索保存的值并在其他页面上使用它们。

亲切地

Answer 1

你必须像下面那样改变你的[(ngModel)]

<ion-item>
    <ion-input type="text" placeholder="Adresse du serveur" [(ngModel)]="this.paramService.linkServer"></ion-input>
</ion-item>

您已将此添加到模型中 this.paramService. 您已为按钮添加。

您也可以从参数 page.ts

中删除下面的内容

this.paramService.linkServer;
this.paramService.user;
this.paramService.password;
this.paramService.bienvenue;
this.paramService.notification;
this.paramService.vibration;

提供商中的 ionic 3 本机存储

ionic 3 native-storage in a provider

provider

typescript

cordova-nativestorage

ionic3

angular