Зависимость впрыска Угловая 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) 
    } 
} 

И это мой главный компонент:

Я попытался переходящим в Http пакет, когда Я ввожу службу в компонент, но также просто выбросил ошибку.

Answer 1

После прочтения статей, представленных в комментариях от @EricMartinez, я понял, что было не так, поскольку класс обслуживания так бастобит, что он не создает метаданные, необходимые для работы рамовой рамки. Так вот как мой код выглядит сейчас:

Компонент:

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 в параметре привязки бутстрапа.