注射器在 Angular2/Ionic2 中没有按预期工作答案

【问题标题】：Injector not working as expected in Angular2/Ionic2注射器在 Angular2/Ionic2 中没有按预期工作
【发布时间】：2016-06-17 21:12:20
【问题描述】：

我定义了一个服务如下：

//storageService.ts
import { Injectable } from '@angular/core';
import {Storage, SqlStorage} from 'ionic-angular';

@Injectable()
export class StorageService {
    storage: any;

    constructor() {
        this.storage = new Storage(SqlStorage);
    }

    getUser() {
        return this.storage.get('user');
    }

}

我将其注入到另一个类中，如下所示：

Profile.ts
import {StorageService} from '../../services/storageService';

@Page({
    templateUrl: 'build/pages/profile/profile.html',
    providers: [StorageService]
})
export class ProfilePage {


    constructor(private http: Http, storageService: StorageService)  {
        this.storageService.getUser().then(user => {
          this.user = JSON.parse(user);  
        }).catch(error => {
           console.log(error);
        });

    }

}

但是我一直收到错误：

Cannot read property 'getUser' of undefined

因为我在构造函数中注入服务..我怎么会收到这个错误？

【问题讨论】：

您是否在@App(...) 中添加了providers: [HTTP_PROVIDERS]？
这里没有HTTP调用
不明白你的意思。 constructor(private http: Http, 需要它
您需要填写您的获取参数（）。这个文档页面解释了依赖注入的所有目的：ionicframework.com/docs/v2/getting-started/tutorial/…（检查底部）

标签： angular ionic2

【解决方案1】：

因为您使用的是 TypeScript，您需要在构造函数中将提供者定义为 private 或 public，这将自动在页面类中创建提供者的实例，例如：

constructor(private http: Http, private storageService: StorageService)  {
        this.storageService.getUser().then(user => {
          this.user = JSON.parse(user);  
        }).catch(error => {
           console.log(error);
        });    
    }

对您的问题的其他回复提供了不适用于您的 JavaScript 解决方案。

【讨论】：

【解决方案2】：

据我所知，您需要 Ionic 中的静态 parameters getter，例如：

@Page({
    templateUrl: 'build/pages/profile/profile.html',
    providers: [StorageService]
})
export class ProfilePage {

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

    constructor(private http: Http, storageService: StorageService)  {
        this.storageService.getUser().then(user => {
          this.user = JSON.parse(user);  
        }).catch(error => {
           console.log(error);
        });
    }
}

【讨论】：

这是 Angular DI 用来确定需要传递给 constructor(...) 的方法。返回的数组需要是与构造函数参数顺序相同的类型数组。在上述情况下，DI 为Http 和StorageService 查找提供程序并将它们传递给构造函数。我不知道 Ionic，但似乎需要这种方式。在普通的 Angular2 应用程序中，DI 可以从构造函数签名中的类型中获取信息。它也可以像上面在 ES5 中解释的那样工作。我猜用于 Ionic（Babel？）的构建工具没有保留这种类型信息。

【解决方案3】：

显然我错误地使用了打字稿。

必须声明 storageService 如下：

constructor(private http: Http,private storageService: StorageService)  {

即我缺少 private 关键字

【讨论】：