angular2将服务注入到其他-使用@Inject时出错

Question

我正在使用angular2测试版。在使用@Inject注解将一个服务注入到另一个服务时出现错误，无法找出错误所在。一切似乎都是按照Angular2 documentation进行的。

我正在使用基于云的数据服务- CloudDB -来满足我的应用程序的数据需求。CloudDB给了我一个基于javascript的客户端库，我可以将它包含在我的js应用程序中，用于在我的cloudDB数据库中执行CRUD操作，或者调用我存储在CloudDB帐户中的其他自定义API，比如UserAuth API (用于验证用户凭证的API)。在使用cloudDB js client lib API之前，我需要通过调用cloudDB js对象的getClient方法来提供我的CloudDB帐户的URL和authKey。

在我的angualar2应用程序中，我创建了一个可注入的服务类CloudDBProvider，该类将存储我的CloudDB帐户URL和authKey，并调用CloudDB.getClient为我的CloudDB帐户设置提供者的js客户端对象。

import {Injectable} from 'angular2/angular2'; 
///<reference path="../typeDefs/CloudDB.d.ts" /> //typedef of CloudDB js library

@Injectable()
export class CloudDBProvider {
    private cloudDBClient: CloudDB.JSClient; 
    public get cloudDBClient(): CloudDB.JSClient {
        return this.cloudDBClient;
    }


    constructor() {
        this.cloudDBClient = new CloudDB.getClient(
            "https://myaccount.CloudDB.com/",
            "AcfdsfmyDdCMHeadfsdsdfHdsf68" // account authKey
        );
    }
}

现在，我想要在这个angular2应用程序中创建一个UserUtils服务，我想要注入上面的类来获取cloudDBClient对象。我编写了如下UserUtils服务类，就像您从教程中学到的那样

import {Injectable, Inject} from 'angular2/angular2';
import {CloudDBProvider} from './CloudDBProvider';

@Injectable()
export class UserUtils {
private _userDetails: Object = {};
private _cloudDBProvider: CloudDBProvider;
private _cloudDBClient: Microsoft.WindowsAzure.MobileServiceClient;;

constructor( @Inject(CloudDBProvider) cloudDBPrvdr: CloudDBProvider) {
    this._cloudDBProvider = cloudDBPrvdr;
    this._cloudDBClient = this._cloudDBProvider.cloudDBClient;  //the public getter property in the class CloudDBProvider
}

public authenicateUser(p_strUserName: string, p_strUserPassword: string) {
    var p: Promise<any> = new Promise(
        (resolve: (result: any) => void, reject: (err: any) => void) =>
            this._cloudDBClient.userlogin(p_strUserName, p_strUserPassword).done( //using API 'userlogin' of cloudDB to authenticate user against my cloudDB's users table.
                (loginResult) => {
                    alert("from Userutils - You are now logged in as: " + loginResult.user.basicProfile.firstName);
                    resolve(loginResult);
                },
                (loginErr: any) => {
                    alert("Error: " + loginErr.request.responseText);
                    reject(loginErr);
                }
            )
    );

    return p;
}

}

然后我尝试在我的LoginPage组件中使用UserUtils，如下所示：

import {Component} from 'angular2/core';
import {WelcomePage} from  "../views/welcome/welcome";
import {UserUtils} from  "../services/UserUtils";


@Component({
    templateUrl: 'app/login/login.html',
    providers: [UserUtils]
})
export class LoginPage {
    private _userUtils: UserUtils;

    constructor( userUtils: UserUtils) {
        this._userUtils = userUtils;
     } 


    public loginButtonClicked(event, userName, password) { //called when Login Button is clicked by user
         //...
        //... to-do field value verification 
        //...

        this._userUtils.authenicateUser(userName, password).then(
          (result) => {
              //navigate to WelcomePage
          },
           (err) => { alert(err); }

      );

   }
} 

当我使用UserUtils时，组件LoginPage不工作。浏览器控制台抛出错误-没有用于CloudDBProvider的提供程序！(LoginPage -> UserUtils -> CloudDBProvider)

请注意，如果我将'authenicateUser‘方法从UserUtils直接移到CloudDBProvider，并在LoginPage组件中使用CloudDBProvider进行用户身份验证，那么一切都会正常工作，用户在登录后会得到身份验证并导航到欢迎页面。此外，如果我从UserUtils的构造函数中删除@Inject( CloudDBProvider ) cloudDBPrvdr，则不会抛出任何错误，并且应用程序可以正常工作。显然，我不能在UserUtils中使用CloudDBProvider，但重点是应用程序不会抛出任何错误，这意味着@Inject有问题。

你知道我哪里错了吗？

Answer 1

据我所知，您的错误是在导入时使用以下代码更改Injectable的导入

import {Component, Inject, Injectable} from 'angular2/core';

同样，根据我的说法，当我们使用@injectable注释时，不需要在构造函数中使用@inject，您只需将您的服务与public标识符放在一起，就可以将该服务用于同一类的任何其他方法。

Answer 2

也许您可以在组件的提供程序列表中添加CloudDBProvider提供程序：

@Component({
  templateUrl: 'app/login/login.html',
  providers: [UserUtils, CloudDBProvider]
})
export class LoginPage {
  (...)
}

或者在bootstrap函数的第二个参数内的应用程序级别：

bootstrap(MainComponent, [CloudDBProvider]);

这个答案可能会给你一些额外的提示：Angular2 Beta dependency injection。

希望对你有帮助，蒂埃里