gpt4 book ai didi

dependency-injection - angular2 向其他人注入(inject)服务 - 使用@Inject 时出错

转载 作者:太空狗 更新时间:2023-10-29 19:31:26 28 4
gpt4 key购买 nike

<分区>

我正在使用 angular2 测试版。并在使用 @Inject 注释将我的一项服务 DI 到另一项服务时出错,无法找出我错在哪里。一切似乎都符合 Angular2 documentation .

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

在我的 angualar2 应用程序中,我创建了一个可注入(inject)服务类 - 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 服务,我想将上面的类注入(inject)到该服务中以获取 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 的提供者! (登录页面 -> UserUtils -> CloudDBProvider)

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

我哪里出错了?

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com