将多个服务插入服务 - angular2

Question

我正在尝试将自己创建的服务和 angular2 Http 服务注入到我的自定义 HttpRest 服务中。

使用

@Inject(Http) public _http: Http

工作正常，但是当我尝试注入另一个自制服务时，出现以下错误：

EXCEPTION: Cannot resolve all parameters for 'HttpRest'(Http @Inject(Http), undefined @Inject(undefined)). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'HttpRest' is decorated with Injectable.

出于某种原因 UserIds 未定义，即使导入成功。 我的定制服务：

@Injectable()
export class UserIds{
   private _signature_id:string;
   private _role_id:number;
   get signature_id():string{
      return this._signature_id;
   }
   set signature_id(id:string){
      this._signature_id = id;
   }
   get role_id():number{
      return this._role_id;
   }
   set role_id(id:number){
      this._role_id = id;
   }
} 

自定义 HttpRest 服务将 Http 和 UserId 都注入：

@Injectable()
export class HttpRest{
    groups;
    constructor(
        @Inject(Http) public _http: Http,
        @Inject(UserIds) public _ids: UserIds
    ){}
...
}

注意！当我删除

,
@Inject(UserIds) public _ids: UserIds

我没有收到错误。
我错过了什么？

更新 问题实际上是由于我试图理解的一些未知原因，在构造函数参数中未定义 UserIds，所以这个问题的标题变得无关紧要。它应该是“在构造函数参数中未定义导入的服务”。
请参考我在这篇文章后面对这个问题的回答。

更新：
请参考讨论此问题的问题。 Using index.ts file to export class causes undefined in injected constructor

Answer 1

@Inject(Http) public _http: Http 中的@Inject(...) 在@Inject() 的参数与参数类型相同时是多余的。

@Injectable()
export class HttpRest{
    groups;
    constructor(public _http: Http, public _ids: UserIds
    ){}
...
}

您需要提供Http 和UserIds 以便DI 能够解决依赖关系。 Http 包含在 HTTP_PROVIDERS 中

@Component({
  selector: '...',
  providers: [HTTP_PROVIDERS, UserIds],
  template: ...
})
export class AppComponent {

}

确保您已正确导入所有内容

import {HTTP_PROVIDERS, Http} from 'angular2/http';

Answer 2

好的，所以我发现了问题，它与 Inject 无关。 问题是我使用索引文件导出服务，如 Angular 2 样式指南 (https://github.com/mgechev/angular2-style-guide/blob/master/old/README.md#directory-structure) 中所述，并且由于某种原因，从索引导入此特定服务会在注入构造函数时导致未定义的值。 当我直接引用源而不是通过索引文件时，由于某种未知的原因，解决了错误。

修复前的导入如下所示：

import {UserIds} from "../index"; 

这适用于所有其他服务和组件。

使用直接源文件导入：

import {UserIds} from "../user_ids/user_ids.service";

由于某种原因，这解决了我的问题，但我想与 index.ts 封装保持一致。

如果有人知道为什么会发生这种情况，我会很高兴更新。

Answer 3

您需要在根级别 (main.ts) 或 app.component.ts 中注册您的 UserIds 服务，这是层次结构中的最高级别：

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>',
    providers: [ UserIds ]
})
export class AppComponent { }