Question

我试图向我的组件注入服务，但我一直收到错误。

这是我的组成部分：

import {Component, View} from 'angular2/angular2';
import {DisplayService} from '../../services/DisplayService';

@Component({
  selector: 'display'
})
@View({
  templateUrl: './components/display/display.html',
  styleUrls: ['./components/display/display.css']
})
export class Display {
  displays: Array<any>;

  constructor(public displayService: DisplayService){

  }
}

这是我的服务：

import {HTTP_BINDINGS, Http} from 'http/http';

export class DisplayService {
    displays: Array<any>;

    constructor(public http: Http){

    }

    getDisplays() {
        var path = 'http://localhost:8000/get';
        this.http.get(path)
    }
}

这是我的主要内容：

import {Component, View, bootstrap} from 'angular2/angular2';
import {HTTP_BINDINGS, Http} from 'angular2/http';

import {DisplayService} from './services/DisplayService';

@Component({
  selector: 'app',
  viewBindings: [DisplayService]
})
@View({
  templateUrl: './app.html',
  styleUrls: ['./app.css']
})
class App {}

bootstrap(App, [ROUTER_BINDINGS, HTTP_BINDINGS]);

EXCEPTION: Error during instantiation of Token(Promise<ComponentRef>)!.

ORIGINAL EXCEPTION: Cannot resolve all parameters for DisplayService(?). Make sure they all have valid type or annotations.

当我将服务注入组件时，我尝试传递Http包，但也只是抛出错误。

Answer 1

在阅读了@EricMartinez评论中提供的文章后，我意识到错误，因为服务类是如此的准确，它不会产生di框架工作所需的元数据。所以这就是我的代码现在的样子：

组件：

import {Component, View, NgFor} from 'angular2/angular2';

import {Subbar} from '../subbar/subbar';
import {DisplayCard} from '../display-card/display-card';

import {DisplayService} from '../../services/display_service';

@Component({
  selector: 'display'
})
@View({
  templateUrl: './components/display/display.html',
  styleUrls: ['./components/display/display.css'],
  directives: [Subbar, DisplayCard, NgFor]
})
export class Display {
    displays: Array<any>;

    constructor(public displayService: DisplayService){
        displayService.getDisplays()
            .toRx()
            .map(res => res.json())
            .subscribe(displays => this.displays = displays.screens);
    }
}

服务：

import {Http} from 'angular2/http';
import {Injectable} from 'angular2/di';

@Injectable()
export class DisplayService {
    constructor(public http: Http){

    }

    getDisplays() {
        var path = 'http://localhost:8000/getscreens';
        return this.http.get(path);
    }
}

正如您所看到的，添加@Injectable（）会强制生成元数据。设置服务的另一个选择是：

import {Http} from 'angular2/http';
import {Inject} from 'angular2/di';

export class DisplayService {
    constructor(@Inject(Http) http: Http){

    }

    getDisplays() {
        var path = 'http://localhost:8000/getscreens';
        return this.http.get(path);
    }
}

它的味道我刚刚找到了第一种清洁方法。

Answer 2

您必须导入

import {Injectable} from 'angular2/core';

进入您的服务并将@Injectable注释放在DisplayService的顶部。

最后一件事是将DisplayService放入bootstrap绑定参数。

依赖注入Angular 2

2 个答案: