我在加载一个类到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;
}
}
我一直得到一个错误消息说没有NameService的提供者。
有人能帮我找出我的代码的问题吗?
您需要将其添加到providers数组中，该数组包含组件上的所有依赖项。
请看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 { }
When to use NgModule versus an application component
On the one hand, a provider in an NgModule is registered in the root
injector. That means that every provider registered within an NgModule
will be accessible in the entire application.
On the other hand, a provider registered in an application component
is available only on that component and all its children.
Here, the APP_CONFIG service needs to be available all across the
application, so it's registered in the AppModule @NgModule providers
array. But since the HeroService is only used within the Heroes
feature area and nowhere else, it makes sense to register it in the
HeroesComponent.
Also see "Should I add app-wide providers to the root AppModule or the
root AppComponent?" in the NgModule FAQ.
所以在你的情况下，简单地改变注入到提供商如下所示:
@Component({
selector: 'my-app',
providers: [NameService]
})
在Angular的新版本中，@View和其他一些东西也消失了。
欲了解更多信息，请访问这里。
在Angular 2中，你可以在三个地方“提供”服务:
引导
根组件
其他组件或指令
“引导提供者选项用于配置和覆盖Angular自己的预注册服务，比如路由支持。”——参考
如果你只想在整个应用中使用一个NameService实例(例如，Singleton)，那么将它包含在根组件的providers数组中:
@Component({
providers: [NameService],
...
)}
export class AppComponent { ... }
砰砰作响
如果你希望每个组件都有一个实例，可以使用组件配置对象中的providers数组:
@Component({
providers: [NameService],
...
)}
export class SomeOtherComponentOrDirective { ... }
更多信息请参见分层注入器文档。
你应该在你的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 {
}
如果你想在不考虑应用程序状态的情况下为特定组件级别创建依赖项，那么你可以将依赖项注入组件提供者元数据选项，如所示的accepted @Klass answer。
将@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]
})
如果你想在整个应用程序中访问你的服务你可以传入应用程序提供程序
