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

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演示但是当我装饰我的类时,我在控制台中出现错误:@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.

您可以在本文中找到更详细的说明.