Angular没有名称服务的提供者

加载到Angular组件的类有问题。 我试图解决很长一段时间，甚至试图将其添加到单个文件。 我拥有的是：

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); 

服务/ NameService.ts

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

所有的时间我得到错误消息说“没有名称服务提供商”…

有人可以帮我find我的代码小问题？

Answer 1

你必须使用providers而不是injectables

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

在这里完成代码示例 。

Answer 2

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

1. 引导
2. 根组件
3. 其他组件或指令

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

如果你只想在你的整个应用程序中使用NameService的一个实例（即Singleton），那么将它包含在你的根组件的providers数组中：

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

Plunker

如果您希望每个组件有一个实例，请使用组件的configuration对象中的providers数组：

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

有关更多信息，请参阅分层注入器文档。

Answer 3

从Angular 2 Beta开始：

将@Injectable添加到您的服务中：

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

和你的组件configuration添加providers ：

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

Answer 4

你应该在你的AppModule的NgModule元数据的providers数组中注入NameService 。

 @NgModule({ imports: [BrowserModule, ...], declarations: [...], bootstrap: [AppComponent], //inject providers below if you want single instance to be share amongst app providers: [MyService] }) export class AppModule { } 

如果要为特定组件级别创build依赖关系而不打扰应用程序的状态，那么可以在所示的组件providers元数据选项中注入依赖关系。

Answer 5

你应该在你的AppModule的NgModule元数据的providers数组中注入NameService。

 @NgModule({ providers: [MyService] }) 

并确保以相同的名称导入组件（区分大小写），因为SystemJs区分大小写（按devise）。 如果你在你的项目文件中使用不同的path名称，像这样：

main.module.ts

 import { MyService } from './MyService'; 

您-component.ts

 import { MyService } from './Myservice'; 

那么System js将会进行双重导入

Answer 6

Angular 2已经改变，这是你的代码的顶部应该是什么样子：

 import { ComponentAnnotation as Component, ViewAnnotation as View, bootstrap } from 'angular2/angular2'; import {NameService} from "./services/NameService"; @Component({ selector: 'app', appInjector: [NameService] }) 

另外，你可能想在你的服务中使用getter和setter：

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

然后在你的应用程序，你可以简单地做：

 this.names = nameService.names; 

我build议你去plnkr.co并创build一个新的Angular 2（ES6），然后让它在那里工作。 它会为你设置一切。 一旦它在那里工作，将其复制到您的其他环境中，并分析该环境中的任何问题。

Answer 7

在Angular V2中，现在是：

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

Answer 8

您也可以在bootstrap-command中声明依赖关系，如下所示：

 bootstrap(MyAppComponent,[NameService]); 

至less这就是alpha40中的工作。

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

Answer 9

嗨，你可以在你的.ts文件中使用这个：

首先在这个.ts文件中导入你的服务：

 import { Your_Service_Name } from './path_To_Your_Service_Name'; 

然后在同一个文件中可以添加providers: [Your_Service_Name] ：

  @Component({ selector: 'my-app', providers: [Your_Service_Name], template: ` <h1>Hello World</h1> ` }) 

Answer 10

将其添加到供应商不注射

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

Answer 11

没有NameService的提供者是Angular2初学者的常见问题。

原因：在使用任何自定义服务之前，我们必须先将它与NgModule一起注册，方法是将其添加到提供程序列表中：

解：

 @NgModule({ imports: [...], providers: [CustomServiceName] }) 

Answer 12

Angular2要求你在bootstrap函数调用中声明所有注入。 没有这个你的服务不是一个注射对象。

 bootstrap(MyAppComponent,[NameService]); 

Answer 13

您需要将其添加到提供程序数组，其中包括所有依赖您的组件。

请参阅angular度文档中的这一部分：

在组件中注册提供者

这是一个修改后的HeroesComponent，在其提供程序数组中注册HeroService。

 import { Component } from '@angular/core'; import { HeroService } from './hero.service'; @Component({ selector: 'my-heroes', providers: [HeroService], template: ` <h2>Heroes</h2> <hero-list></hero-list> ` }) export class HeroesComponent { } 

何时使用NgModule与应用程序组件

一方面，NgModule中的提供者被注册在根注入器中。 这意味着每个在NgModule中注册的提供者都可以在整个应用程序中访问。

另一方面，注册在应用程序组件中的提供程序只能在该组件及其所有子项上使用。

在这里，APP_CONFIG服务需要在整个应用程序中都可用，所以它在AppModule @NMModule提供程序数组中注册。 但是由于HeroService只能在Heroes特征区域内使用，而在其他地方使用HeroService，所以在HeroesComponent中注册它是有意义的。

另请参阅“我应该将应用程序范围的提供程序添加到根AppModule还是根AppComponent？” 在NgModule FAQ。

所以在你的情况下，简单地改变像下面的提供商注射剂：

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

同样在Angular的新版本中，@View和其他一些东西不见了。

欲了解更多信息，请访问这里 。

Answer 14

将@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 15

将你的服务添加到app.module.ts文件中的providers []数组中。 像下面一样

//这里我的服务是CarService

app.module.ts

 import {CarsService} from './cars.service'; providers: [CarsService] // you can include as many services you have