我在将类加载到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;
}
}
我一直收到一条错误消息，说No provider for NameService。
有人可以帮助我发现我的代码问题吗？
你必须使用providers而不是injectables
@Component({
selector: 'my-app',
providers: [NameService]
})
您还可以在bootstrap-command中声明依赖项，如：
bootstrap(MyAppComponent,[NameService]);
至少那是在alpha40中对我有用的东西。
这是链接：http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0
嗨，您可以在.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> `
})
将其添加到提供者而非注射剂
@Component({
selector:'my-app',
providers: [NameService]
})
您需要将其添加到providers数组，其中包括组件的所有依赖项。
在角度文档中查看此部分：
在组件中注册提供程序
这是一个修订的HeroesComponent，它在其providers数组中注册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 @NgModule providers数组中注册。但由于HeroService仅在Heroes功能区域内使用，而在其他地方使用，因此在HeroesComponent中注册它是有意义的。
另请参阅“我应该将应用范围的提供程序添加到根AppModule还是根AppComponent？”在NgModule FAQ中。
因此，在您的情况下，只需将注射剂更改为以下提供者：
@Component({
selector: 'my-app',
providers: [NameService]
})
另外在Angular的新版本中，@ View和其他一些东西都没了。
欲了解更多信息，请访问here。
Angular2要求您在bootstrap函数调用中声明所有注入。如果没有这个，您的服务就不是可注射的对象。
bootstrap(MyAppComponent,[NameService]);
将@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]
})
或者如果您想在整个应用程序中访问您的服务，您可以通过应用程序提供商
将您的服务添加到app.module.ts文件中的providers []数组。如下
//这里我的服务是CarService
app.module.ts
import {CarsService} from './cars.service';
providers: [CarsService] // you can include as many services you have
在Angular中，您可以通过两种方式注册服务：
1.在模块或根组件中注册服务
功效：
如果将服务注册到延迟加载的模块，则应该注意：
2.将服务注册到任何其他应用程序组件
功效：
如果将服务注册到任何其他应用程序组件，则应该小心
在Angular 2中，有三个地方可以“提供”服务：
“引导程序提供程序选项用于配置和覆盖Angular自己的预注册服务，例如其路由支持。” - reference
如果您只想在整个应用程序中使用一个NameService实例（即Singleton），那么请将其包含在根组件的providers数组中：
@Component({
providers: [NameService],
...
)}
export class AppComponent { ... }
如果您希望每个组件有一个实例，请在组件的配置对象中使用providers数组：
@Component({
providers: [NameService],
...
)}
export class SomeOtherComponentOrDirective { ... }
有关详细信息，请参阅Hierarchical Injectors doc。
截至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;
}
}
并在您的组件配置中添加providers：
@Component({
selector: 'my-app',
providers: [NameService]
})
你应该在你的NameService的providers元数据的AppModule数组中注入NgModule。
@NgModule({
imports: [BrowserModule, ...],
declarations: [...],
bootstrap: [AppComponent],
//inject providers below if you want single instance to be share amongst app
providers: [MyService]
})
export class AppModule {
}
如果要在不打扰应用程序状态的情况下为特定组件级别创建依赖关系，则可以在组件providers元数据选项上注入该依赖关系，如所显示的已接受的@Klass答案。
您应该在AppModule的NgModule元数据的providers数组中注入NameService。
@NgModule({
providers: [MyService]
})
并确保使用相同名称（区分大小写）在组件中导入，因为SystemJs区分大小写（按设计）。如果在项目文件中使用不同的路径名，如下所示：
main.module.ts
import { MyService } from './MyService';
您-component.ts
import { MyService } from './Myservice';
然后系统js将进行双重导入
在Angular v2及以上它现在是：
@Component({
selector:'my-app',
providers: [NameService],
template: ...
})
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;
我建议你去plnkr.co并创建一个新的Angular 2（ES6）插件并让它首先在那里工作。它将为您设置一切。一旦它在那里工作，将其复制到您的其他环境并对该环境的任何问题进行分类。
令人震惊的是，语法在最新版本的Angular中再次发生了变化:-)来自Angular 6 docs：
从Angular 6.0开始，创建单例服务的首选方法是在服务上指定应在应用程序根目录中提供它。这是通过在服务的@Injectable装饰器上将provideIn设置为root来完成的：
SRC /应用程序/ user.service.0.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class UserService {
}
错误No provider for NameService是许多Angular2初学者面临的常见问题。
原因：在使用任何自定义服务之前，首先必须通过将其添加到提供者列表中将其注册到NgModule：
解：
@NgModule({
imports: [...],
providers: [CustomServiceName]
})