将存储与 Ionic 2 结合使用

Question

我正在尝试使用 Ionic 2 中的存储，如文档所示：

离子储存改造

    import {Http} from '@angular/http';
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Component} from '@angular/core';
import {Storage} from '@ionic/storage';
import 'rxjs/add/operator/map';
// import {GlobalVars, getMyGlobalVar} from './global-vars';

export class User {
  token: string;
  constructor(token: string) {
    this.token = token
  }
}
@Injectable()
export class AuthService {
    static get parameters() {
        return [[Http]];
    }
    constructor(public http: Http, storage:Storage) {
        this.http = http;
      this.storage = storage;
    }
  currentUser: User;
  public login(credentials) {
    // console.log(getMyGlobalVar())
    if (credentials.username === null || credentials.password === null) {
      return Observable.throw("Please insert credentials");
    } else {
      return Observable.create(observer => {
        // At this point make a request to your backend to make a real check!
        // send username and password to server
        // save user auth token

                    var creds = {username:credentials.username, password:credentials.password}
                    this.http.post('http://someurl.com/api-token-auth/', creds).subscribe(data => {
            this.storage.set('1984_token', data.json().token);
                        let access = (true);
                        this.currentUser = new User(data.json().token);
                        observer.next(access);
                        observer.complete();
                    }, error => {
                let access = (false);
                        observer.next(access);
            }, () => {
                    });
      });
    }
  }

  public getUserInfo() : User {
    return this.currentUser;
  }
  public logout() {
    return Observable.create(observer => {
      this.currentUser = null;
      observer.next(true);
      observer.complete();
    });
  }
}

它不能设置未定义的属性，因此存储是未定义的。Stprage 也导入到 app.module 中，并作为提供程序添加。我正在绑定将其存储在提供程序中。

Runtime Error
Cannot read property 'set' of undefined
Stack
TypeError: Cannot read property 'set' of undefined
    at SafeSubscriber._this.http.post.subscribe.access [as _next] (http://localhost:8100/build/main.js:37296:34)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:44390:16)
    at SafeSubscriber.next (http://localhost:8100/build/main.js:44339:22)
    at Subscriber._next (http://localhost:8100/build/main.js:44292:26)
    at Subscriber.next (http://localhost:8100/build/main.js:44256:18)
    at XMLHttpRequest.onLoad (http://localhost:8100/build/main.js:54386:38)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:34819:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9659)
    at e.runTask (http://localhost:8100/build/polyfills.js:3:7083)
Ionic Framework: 2.0.0-rc.5
Ionic Native: 2.2.11
Ionic App Scripts: 1.0.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 4.4.4
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36

我找不到任何清晰的文档如何使用它

package.json：

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "^1.1.7",
    "ionic-angular": "2.0.0-rc.5",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.0.0",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "isango_mobile: An Ionic project"
}

Answer 1

在打字稿中，您需要使用 this 来访问类变量。

export class MyApp {
  constructor(public storage: Storage) {
    //this.storage = storage; this line is not required as you have set access specifier in constructor parameter.
  }
  foo () {
     this.storage.set('name', 'Max');
  } 

Answer 2

好的，我像这样使用并为我工作。

import { Storage } from '@ionic/storage';
 constructor(
 private storage : Storage){}
 foo(){
    this.storage.set('name','Max');
 }

并且不需要对app.module进行任何更改

Answer 3

我遇到了同样的问题，在页面中对我来说工作正常，并在另一个页面中记录我的测试令牌集，例如

    import { Storage } from '@ionic/storage'
    ....
    export class AccountPage {
      settings: AppSettings;
      loading: any;
      constructor(public http: Http, public navCtrl: NavController, public storage: Storage, private platform: Platform, private loadingCtrl: LoadingController, public authService: AuthService) {
      }
     ionViewDidLoad() {
    this.storage.get('token').then((token) => {
          console.log('token ' + token);
        });
        }

但我发现它在提供者中没有定义。在构造函数中使用"公共存储：存储"，以便两者都注入存储，然后 this.storage 获取/设置。

我以与页面和提供商相同的方式处理存储，但使用提供商并不快乐。在 app.module.ts 中添加存储：

@NgModule({
  declarations: [
    RVCommunityApp,
    AccountPage,
    DirectoryPage,
    FaqPage,
    ModalPage,
    OffersPage,
    OfferDetailsPage,
    QRCodePage,
    TabsPage,
    TouchpointsPage,
    TouchpointDetailsPage,
    VendorPage
  ],
  imports: [
    IonicModule.forRoot(RVCommunityApp, {
      tabsPlacement: 'bottom',
      statusbarPadding: true,
      tabSubPages: true,
      platforms: {
        ios: {
          statusbarPadding: true
        }
      }
    }, {}),
    CloudModule.forRoot(cloudSettings)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    RVCommunityApp,
    AccountPage,
    DirectoryPage,
    FaqPage,
    ModalPage,
    OffersPage,
    OfferDetailsPage,
    QRCodePage,
    TabsPage,
    TouchpointsPage,
    TouchpointDetailsPage,
    VendorPage
  ],
  providers: [AuthService, CategoryService, ConnectivityService, ContentService, DirectoryService, ModalService, OffersService, TouchpointService, AppSettings, Storage]
})
export class AppModule {}