注入错误：无法解析所有参数

Question

我在尝试将Http服务注入我的PanelsService时收到此错误。

import {Component} from 'angular2/core';
import {Http} from 'angular2/http';

export class PanelsService {

  constructor(public http:Http) { }

  getPanelFilters() {
    var url = '../../data/panelFilters/' + 13677 + '.json'

    return this.http.get(url)
  }

}

我正在尝试从我的PanelsService访问SidebarComponent：

import {PanelsService} from '../panels/panels.service';

@Component({
  ....
  providers: [PanelsService]
})

export class SidebarComponent implements OnInit {

  constructor(public panelsService:PanelsService) { }

  ngOnInit() {
    console.log('I am the sidebar component');
  }

}

应该注意的是，我的tsconfig.json也有以下几行：

"emitDecoratorMetadata": true,
"experimentalDecorators": true,

我尝试使用@Injectable作为演示here，但当我用@Injectable()装饰我的课时，我在控制台中收到错误：

boot.js只是引导我的应用程序组件，它不会注入任何依赖项：

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './components/app.component';

bootstrap(AppComponent).catch(err => console.error(err));

任何帮助都将不胜感激。

Answer 1

您的代码中缺少一件事：提供商。

使用

export class PanelsService {

  constructor(public http:Http) { }
}

您要求注入器使用令牌Http（类型注释）识别依赖关系。但是，您的代码中没有任何内容（至少如此处所示），它告诉您的注入器必须为令牌Http返回。所以它只是信息的一半。

为了解决依赖关系，我们需要一个令牌（我们要求的东西）和一个提供者（创建我们要求的那个对象的东西）。可以使用bootstrap()装饰器中的providers属性在@Component()期间或在组件级别配置提供程序。

除非您希望每次都创建Http的新实例，否则最有必要在bootstrap()配置该提供程序，以便在整个应用程序中提供相同的实例。

以下是Http的提供商的样子：

import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Http} from 'angular2/http';

bootstrap(YourApp, [
  provide(Http, {useClass: Http})
]);

provide()使用令牌Http并使用配方描述如何创建某个对象（useClass: Http）的提供程序。如果配方是useClass且类与令牌相同，我们可以使用以下简写语法：

bootstrap(YourApp, [
  Http
]);

但是，我们会发现这还不够，因为事实证明Http也使用DI本身作为自己的依赖。这意味着，我们还需要这些依赖项的提供程序。幸运的是，对于这些情况，Angular已经提供了预定义的提供者列表。

HTTP_PROVIDERS是使Http工作所需的提供程序配置的集合。所以你要做的就是：

import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(YourApp, [HTTP_PROVIDERS]);

现在，您的应用知道Http的所有依赖关系，令牌和提供商。

您可以在此article中找到更详细的说明。