依赖注入角2

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的评论中提供的文章之后，我意识到了什么是错误的，因为服务类是barebone，所以不产生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放入引导绑定参数中。