angular2 вводят сервис другому - ошибка при использовании @Inject

Question

Я использую angular2 Beta. и получить ошибку при использовании аннотации @Inject для DI моей одной службы другому, не в состоянии выяснить, где я ошибаюсь. Все похоже на Angular2 documentation.

Я использую облачные сервисы данных - CloudDB - для потребностей приложения. CloudDB предоставляет мне клиентскую библиотеку на основе javascript, которую я могу включить в мое приложение js, и использовать для выполнения операций CRUD в моей базе данных cloudDB или вызвать другой пользовательский API, который я сохранил в своей учетной записи CloudDB, например API UserAuth (API для аутентификации учетных данных пользователя) , Прежде чем использовать API-интерфейс cloudDB js client lib, мне нужно указать URL-адрес моей учетной записи cloudDB и authKey, вызвав метод getClient объекта CloudDB js.

В моем приложении angualar2 я создал класс для инъекций - CloudDBProvider - он сохранит мой URL-адрес учетной записи CloudDB и authKey и вызовет CloudDB.getClient, чтобы установить клиентский объект js-провайдера для моей учетной записи CloudDB.

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 
     ); 
    } 
} 

Теперь я хочу, чтобы создать службу UserUtils в этом angular2 приложение, к которому я хочу привнести выше класс, чтобы получить 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; 
} 

}

тогда я пытаюсь использовать UserUtils в моем LoginPage компонента, как показано ниже:

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); } 

    ); 

    } 
} 

компонент LoginPage Безразлично Не работайте, когда я использую UserUtils. В консоли браузера выдается ошибка - нет провайдера для CloudDBProvider! (LoginPage -> UserUtils -> CloudDBProvider)

Обратите внимание, что если я переведу метод «authenicateUser» из UserUtils в CloudDBProvider напрямую и с помощью CloudDBProvider в компоненте LoginPage для аутентификации пользователей, то все будет работать нормально, пользователь получает аутентификацию и навигацию приветствовать страницу после входа в систему. Кроме того, никакая ошибка не возникает, и приложение работает, если я удаляю cloudDBPrvdr из облака UserUtils из облачного конструктора UserUtils, но я не могу использовать CloudDBProvider, а затем в UserUtils, но точка - это приложение не вызывает никакой ошибки, а это значит, что что-то не так с @Inject.

любая подсказка, где я иду не так?

Answer 1

Upto моего понимания ваша ошибка в импорте изменить импорт Injectable с этим

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

также accoriding ко мне, когда мы использовали @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.

Надеется, что это помогает вам, Тьерри