Angular没有NameService的提供程序

我在加载一个类到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。

有人能帮我找出我的代码的问题吗?

424010 次浏览
小开

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)插件，让它先在里面工作。它会为你安排好一切。一旦它在那里工作，将其复制到您的其他环境中，并对该环境中的任何问题进行分类。

小开
最佳答案

你必须使用providers而不是injectables

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

完整的代码示例。

小开

你也可以在bootstrap命令中声明依赖项:

bootstrap(MyAppComponent,[NameService]);

至少这是我在alpha40中使用的方法。

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

小开

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

bootstrap(MyAppComponent,[NameService]);
小开

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

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

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

如果你在整个应用中只需要一个NameService实例(例如，Singleton)，那么将它包含在根组件的providers数组中:

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

< a href = " http://plnkr.co/edit/bP9pk1K9c1vQkvKjIhFl " >恰好< / >

如果你希望每个组件都有一个实例，可以在组件的配置对象中使用providers数组:

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

有关更多信息，请参阅分层的喷油器文档。

小开

从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]
})
小开

在Angular v2及更高版本中，它现在是:

< p > <代码> @ component ({ 选择器:“我的程序”, 提供者:[NameService], 模板:…… }) < /代码> < / p >
小开

你应该在你的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 {


}

如果你想在不考虑应用程序状态的情况下为特定组件级别创建依赖项，那么你可以在组件providers元数据选项上注入依赖项，如所示的accepted @Klass answer。

小开

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

@NgModule({
providers: [MyService]
})

并且确保在你的组件中导入相同的名称(区分大小写)，因为SystemJs是区分大小写的(根据设计)。如果你在你的项目文件中使用不同的路径名，像这样:

main.module.ts

import { MyService } from './MyService';

your-component.ts

import { MyService } from './Myservice';

那么System js会进行两次导入

小开

嗨，你可以在你的.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]
})
小开

No provider for NameService错误是许多Angular2初学者面临的一个常见问题。

原因:在使用任何自定义服务之前，你必须先将它注册到NgModule的providers列表中:

解决方案:

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

您需要将其添加到providers数组中，该数组包含组件上的所有依赖项。

请看angular文档中的这一部分:

在组件中注册提供者

这是一个修改后的HeroesComponent，它注册了HeroService 提供者数组。< / p > 
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提供商中 数组中。但由于HeroService只在Heroes中使用 特性区而不是其他地方，将其注册在 HeroesComponent . < / p >

也参见“我应该在根模块AppModule中添加应用范围的提供商吗?

. root AppComponent

所以在你的情况下，简单地改变注入到提供商如下所示:

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

在Angular的新版本中，@View和其他一些东西也消失了。

更多信息，请访问在这里。

小开

将@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的最新版本中，语法又发生了变化:-)

从Angular 6.0开始，创建单例对象的首选方式 服务是在服务上指定应该在哪个服务中提供服务 应用程序根目录。这可以通过将providedIn设置为root on来实现 服务的@Injectable装饰器:

src / app / user.service.0.ts

import { Injectable } from '@angular/core';


@Injectable({
providedIn: 'root',
})
export class UserService {
}
小开

在Angular中，你可以用两种方式注册服务:

1. 在模块或根组件中注册服务

效果:

  • 可用于所有组件
  • 适用于终身应用

如果你将一个服务注册到一个惰性加载模块中，你应该注意:

  • 该服务仅可用于该模块中声明的组件

  • 只有当模块被加载时，该服务才在生命周期应用程序中可用

2. 将服务注册到任何其他应用程序组件

效果:

  • 是否将服务的单独实例注入到组件中

如果将服务注册到任何其他应用程序组件中，您应该小心

  • 注入服务的实例将仅对组件及其所有子组件可用。

  • 该实例将在组件的生命周期内可用。

小开

引用

在组件中注册提供者

下面是修改后的HeroesComponent，它在providers数组中注册了HeroService。

import { Component } from '@angular/core';


import { HeroService } from './hero.service';


@Component({
selector: 'my-heroes',
providers: [HeroService],
template: `
`
})
export class HeroesComponent { }

提交答案