Angular没有NameService的提供程序

Question

我有一个问题加载类到Angular组件。很长一段时间以来，我一直试图解决这个问题；我甚至尝试将它加入到一个文件中。我拥有的是：

一个pplication.ts

/// <reference path="../typings/angular2/angular2.d.ts" />

import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NameService} from "./services/NameService";

@Component({
    selector:'my-app',
    injectables: [NameService]
})
@View({
    template:'<h1>Hi {{name}}</h1>' +
    '<p>Friends</p>' +
    '<ul>' +
    '   <li *ng-for="#name of names">{{name}}</li>' +
    '</ul>',
    directives:[NgFor]
})

class MyAppComponent
{
    name:string;
    names:Array<string>;

    constructor(nameService:NameService)
    {
        this.name = 'Michal';
        this.names = nameService.getNames();
    }
}
bootstrap(MyAppComponent);

服务/名称服务。ts

export class NameService {
    names: Array<string>;
    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    getNames()
    {
        return this.names;
    }
}

我一直收到一条错误消息，说没有名称服务的提供者。

有人能帮我发现代码的问题吗？

Answer 1

截至角2β：

将@Injectable添加到您的服务中，如下所示：

@Injectable()
export class NameService {
    names: Array<string>;

    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

    getNames() {
        return this.names;
    }
}

并将提供程序添加到组件配置中，如下所示：

@Component({
    selector: 'my-app',
    providers: [NameService]
})

Answer 2

在Angular 2中，有三个地方可以“提供”服务：

1. 引导程序

“引导提供程序选项用于配置和覆盖Angular自己的预注册服务，例如其路由支持。”--参考

如果您只想在整个应用程序（即Singleton）中使用NameService的一个实例，请将其包含在根组件的提供程序数组中：

@Component({
   providers: [NameService],
   ...
)}
export class AppComponent { ... }

Plunker

如果您希望每个组件有一个实例，请在组件的配置对象中使用提供程序数组：

@Component({
   providers: [NameService],
   ...
)}
export class SomeOtherComponentOrDirective { ... }

有关更多信息，请参阅文档。

Answer 3

您必须使用提供程序而不是注入程序

@Component({
    selector: 'my-app',
    providers: [NameService]
})

这里有完整的代码示例。