依赖注入 Angular 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

你必须导入

import {Injectable} from 'angular2/core';

到您的服务中，并将@Injectable 注释放在 DisplayService 的顶部。

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

Answer 2

阅读@EricMartinez 评论中提供的文章后，我意识到问题所在，因为服务 class 太准系统了，它不会生成 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);
    }
}

随心所欲我刚刚找到了第一种更清洁的方法。

依赖注入 Angular 2

Dependency injection Angular 2

javascript

angular