3

angular2 ベータ版を使用しています。@Inject アノテーションを使用して 1 つのサービスを別のサービスに DI するとエラーが発生し、どこが間違っているのかわかりません。すべてが Angular2 documentationに従っているようです。

アプリケーションのデータ ニーズに対応するために、クラウド ベースのデータ サービスである CloudDB を使用しています。CloudDB が提供する JavaScript ベースのクライアント ライブラリは、js アプリに含めて、cloudDB データベースで CRUD 操作を実行したり、CloudDB アカウントに保存した UserAuth API (ユーザーの資格情報を認証するための API) などの他のカスタム API を呼び出したりするために使用できます。cloudDB js クライアント 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 に何か問題があることを意味します。

私が間違っている手がかりはありますか？

4

2 に答える 2

0

CloudDBProviderおそらく、コンポーネントのプロバイダーのリストにプロバイダーを追加できます。

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

または、関数の 2 番目のパラメーター内のアプリケーション レベルでbootstrap:

bootstrap(MainComponent, [CloudDBProvider]);

この回答は、いくつかの追加のヒントを提供する可能性があります: Angular2 Beta 依存性注入。

お役に立てば幸いです、ティエリー

于 2016-01-06T07:02:44.260 に答える