将服务注入组件

Question

我遇到Angular 2.0.0-rc.1的问题。

app.component.ts

import {Component} from "@angular/core";
import {OnInit} from "@angular/core";
import {Article} from "./article";
import {ArticleComponent} from "./article.component";
import {ArticleService} from "./article.service";

@Component({
    selector: "articles",
    directives: [ArticleComponent],
    providers: [ArticleService],
    templateUrl: "app/app.component.html"
})

export class AppComponent implements OnInit {
    articles:Article[];

    constructor(private _articleService: ArticleService) {

    }

    getArticles() {
        this.articles = this._articleService.getArticles();
    }

    ngOnInit() {
        this.getArticles();
    }
}

article.component.ts

import {Component} from "@angular/core";
import {Article} from "./article";

@Component({
    selector: "single-article",
    inputs: ["article"],
    host: {
        class: "singlearticle"
    },
    templateUrl: "app/article.component.html"
})

export class ArticleComponent {

    article: Article;

    votePlus(): boolean {
        this.article.votePlus();
        return false;
    };

    voteMinus(): boolean {
        this.article.voteMinus();
        return false;
    };

}

article.data.ts

import {Article} from "./article";

export var ARTICLES: Article[] = [
    new Article("Semantic UI", "http://semantic-ui.com", "Semantic empowers designers and developers by creating a shared vocabulary for UI.", "http://semantic-ui.com/images/logo.png", 0),
    new Article("Angular 2", "https://angular.io/", "Headers may be oriented to give the hierarchy of a section in the context of the page.", "resources/images/ang.png", 0),
    new Article("Co to jest Bower?", "https://github.com/bower/bower", "Foundation is a family of responsive front-end frameworks that make it easy to design.", "http://bower.io/img/bower-logo.png", 0)
];

article.service.ts

import {ARTICLES} from './article-data';
import {Injectable} from '@angular/core';

@Injectable()

export class ArticleService {
    getArticles() {
        return ARTICLES;
    }
}

错误讯息：

TypeError: Cannot read property 'query' of null

如果我写

，我会收到此消息

constructor(private _articleService: ArticleService) {

}