angular2服务方法没有被调用

Question

我尝试创建一个示例 angular2 服务并使用它，但我不确定我所犯的错误。服务方法无法被组件调用，详情请看plunkerhttps://plnkr.co/edit/tlnGU9Er6GxsOaUMCZZG?p=preview

我的服务代码如下所示

import { Injectable } from 'angular2/core';
import { HTTP_PROVIDERS, Http, Headers, Response, JSONP_PROVIDERS, Jsonp } from 'angular2/http';
import { Configuration } from './Configuration';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs/Observable';

///Service class to call REST API
@Injectable()
export class SampleService {
    items: Array<any>;

    constructor() {
        this.items = [
            { name: 'Test1' },
            { name: 'Test2' },
            { name: 'Test3' }
        ];
    }

    getItems() {
        return this.items;
    }
}

Answer 1

当您引导应用程序（在您的情况下为bootstrap(SampleComponent, [SampleService])）或组件的提供程序数组中时，您需要将@Injectable 服务包含在提供程序数组中。有关依赖注入的更多信息，您可以在此处阅读：https://angular.io/docs/ts/latest/guide/dependency-injection.html。

将其添加为提供者后，无论何时将其注入到类构造函数中，组件都将能够解析它。阅读该链接后，将清楚依赖注入树的工作原理:)

此外，在 plunkr 中，您有两个组件具有相同的选择器（'my-app'），我猜这也是一个错误。