Angular没有NameService的提供者

本文翻译自：Angular no provider for NameService

I've got a problem loading a class into an Angular component. 我在将类加载到Angular组件时遇到了问题。 I've been trying to solve it for a long time; 我一直试图解决它很长一段时间; I've even tried joining it all in a single file. 我甚至尝试在一个文件中加入它。 What I have is: 我有的是：

Application.ts Application.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);

services/NameService.ts 服务/ NameService.ts

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

I keep getting an error message saying No provider for NameService . 我一直收到一条错误消息，说明No provider for NameService 。

Can someone help me spot the issue with my code? 有人可以帮助我发现我的代码问题吗？

---

#1楼

参考：https://stackoom.com/question/24jh9/Angular没有NameService的提供者

---

#2楼

Angular 2 has changed, here is what the top of your code should look like: Angular 2已经改变了，这里代码的顶部应该是这样的：

import {
  ComponentAnnotation as Component,
  ViewAnnotation as View, bootstrap
} from 'angular2/angular2';
import {NameService} from "./services/NameService";

@Component({
  selector: 'app',
  appInjector: [NameService]
})

Also, you may want to use getters and setters in your service: 此外，您可能希望在服务中使用getter和setter：

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

Then in your app you can simply do: 然后在您的应用程序中，您可以做到：

this.names = nameService.names;

I suggest you go to plnkr.co and create a new Angular 2 (ES6) plunk and get it to work in there first. 我建议你去plnkr.co并创建一个新的Angular 2（ES6）插件并让它首先在那里工作。 It will set everything up for you. 它将为您设置一切。 Once it's working there, copy it over to your other environment and triage any issues with that environment. 一旦它在那里工作，将其复制到您的其他环境并对该环境的任何问题进行分类。

---

#3楼

You have to use providers instead of injectables 您必须使用providers而不是injectables

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

Complete code sample here . 这里填写代码示例 。

---

#4楼

You could also have the dependencies declared in the bootstrap-command like: 您还可以在bootstrap-command中声明依赖项，如：

bootstrap(MyAppComponent,[NameService]);

At least that's what worked for me in alpha40. 至少那是在alpha40中对我有用的东西。

this is the link: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0 这是链接： http ： //www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0

---

#5楼

Angular2 requires you to declare all the injectables in bootstrap function call. Angular2要求您在bootstrap函数调用中声明所有注入。 Without this your service is not an injectable object. 如果没有这个，您的服务就不是可注射的对象。

bootstrap(MyAppComponent,[NameService]);

---

#6楼

In Angular 2 there are three places you can "provide" services: 在Angular 2中，有三个地方可以“提供”服务：

1. bootstrap 引导
2. root component 根组件
3. other components or directives 其他组件或指令

"The bootstrap provider option is intended for configuring and overriding Angular's own preregistered services, such as its routing support." “引导程序提供程序选项用于配置和覆盖Angular自己的预注册服务，例如其路由支持。” -- reference - 参考

If you only want one instance of NameService across your entire app (ie, Singleton), then include it in the providers array of your root component: 如果您只想在整个应用程序中使用一个NameService实例（即Singleton），那么将其包含在根组件的providers数组中：

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

Plunker Plunker

If you would rather have one instance per component, use the providers array in the component's configuration object instead: 如果您希望每个组件只有一个实例，请使用组件配置对象中的providers数组：

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

See the Hierarchical Injectors doc for more info. 有关详细信息，请参阅Hierarchical Injectors doc。