Ionic2 / Angular2应用程序中的提供程序

时间:2016-12-27 10:54:35

标签: angular ionic-framework ionic2 angular2-services angular2-providers

我有两个提供者。

  1. AppStorage,负责设置和从存储中获取值。

    import { Injectable } from '@angular/core';
    import {Http, Headers, RequestOptions} from '@angular/http';
    import {Observable} from 'rxjs/Rx';
    import {Storage} from '@ionic/storage';
    
    @Injectable()
    export class AppStorage {
    
      constructor(public http: Http, private storage:Storage) {
        console.log('Hello Appstorage Provider');
      }
      setValue(key,value){
        var setPromise = new Promise((resolve,reject)=>{this.storage.set(key,value).then((res)=>{
          return resolve(res);
        })
      });
        return setPromise;
      };
      getValue(key){
        var getPromise = new Promise((resolve,reject)=>{this.storage.get(key).then((val)=>{
          return resolve(val);
          });
        });
        return getPromise;
    
      } 
    }
    
  2. OauthService是我的api服务。

    import {Http, Headers, RequestOptions} from '@angular/http';
    import { Injectable, Inject} from '@angular/core';
    import 'rxjs/add/operator/map';
    import { AppStorage } from '../providers/appstorage';
    
    @Injectable()
        export class OauthService{
        http: Http;
        response :any;
        appStorage: AppStorage;
        static get parameters() {
            return [[Http]];
        }
        constructor(http: Http,@Inject(AppStorage) appStorage: AppStorage){
        this.http = http;
            this.appStorage = appStorage;
            setTimeout(()=>{
                console.log('Hello OauthService Provider'+this.appStorage+"===="+this.http);
            },3000)
         //output - >Hello OauthService Providerundefined====[object Object] 
        }
      }
    
  3. 现在我将这两个注射剂添加到我的app.module

    import { NgModule, ErrorHandler } from '@angular/core';
    import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
    import { MyApp } from './app.component';
    import { LoginPage } from '../pages/login/login';
    import { AppStorage } from '../providers/appstorage';
    import { Storage } from '@ionic/storage';
    import { OauthService } from '../providers/oauthservice';
    
    @NgModule({
      declarations: [
        MyApp,
        LoginPage
      ],
      imports: [
        IonicModule.forRoot(MyApp)
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        LoginPage
      ],
      providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},OauthService, Storage, AppStorage]
    })
    export class AppModule {}
    

    但是当我运行应用程序时,oauthService的构造函数中的appStorage对象将变为未定义。 你能告诉我我在做什么错,我只是在另一项服务中注入服务。

1 个答案:

答案 0 :(得分:4)

OauthService 提供程序中的静态参数getter(参数)应包含您注入构造函数的所有提供程序。但是,您只注入了 Http 提供商,但没有注入 AppStorage 提供商。 我在下面修改了相应的代码:

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

@Injectable()
export class OauthService {

    response :any;

    static get parameters() {
        return [[Http], [AppStorage]];
    }

    constructor(private http: Http, private appStorage: AppStorage) {

        setTimeout(() => {
            console.log('Hello OauthService: appStorage=' + this.appStorage + ", http=" + this.http);
        }, 3000)
        //output - >Hello OauthService: appStorage=[object Object], http=[object Object]
    }
}