Angular 没有 NameService 的提供者

Question

我在将类加载到 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);

services/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。

有人可以帮我找出我的代码的问题吗？

Answer 1

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

Answer 2

您必须使用providers 而不是injectables

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

Complete code sample here.

Answer 3

您还可以在引导命令中声明依赖项，例如：

bootstrap(MyAppComponent,[NameService]);

至少在 alpha40 中这对我有用。

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

Answer 4

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

bootstrap(MyAppComponent,[NameService]);

Answer 5

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

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

“引导提供程序选项旨在配置和覆盖 Angular 自己的预注册服务，例如它的路由支持。” -- reference

如果您只希望在整个应用程序中使用一个 NameService 实例（即 Singleton），请将其包含在根组件的 providers 数组中：

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

Plunker

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

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

有关更多信息，请参阅Hierarchical Injectors 文档。

Answer 6

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

Answer 7

在 Angular v2 及更高版本中：

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

Answer 8

您应该在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 元数据选项，如所示的接受的@Klass 答案。

Answer 9

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

@NgModule({
   providers: [MyService]
})

并确保以相同的名称（区分大小写）导入您的组件，因为 SystemJs 区分大小写（按设计）。如果您在项目文件中使用不同的路径名，如下所示：

main.module.ts

import { MyService } from './MyService';

你的组件.ts

import { MyService } from './Myservice';

然后系统 js 将进行双重导入

Answer 10

您好，您可以在 .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 11

将其添加到 providers 而不是 injectables

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

Answer 12

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

原因：在使用任何自定义服务之前，您首先必须通过将其添加到提供程序列表来向 NgModule 注册它：

解决方案：

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

Answer 13

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

在 Angular 文档中查看此部分：

在组件中注册提供者

这是一个修改后的 HeroesComponent，它在它的 提供者数组。

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。

另请参阅“我应该将应用范围的提供程序添加到根 AppModule 还是 root AppComponent?”在 NgModule 常见问题解答中。

因此，在您的情况下，只需将注射剂更改为如下提供者：

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

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

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

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 

Answer 16

令人震惊的是，最新版本的 Angular 中的语法又发生了变化 :-) 从 Angular 6 docs:

从 Angular 6.0 开始，创建单例的首选方式 services 是在服务上指定应该提供的服务 应用程序根。这是通过将providedIn设置为root来完成的 服务的 @Injectable 装饰器：

src/app/user.service.0.ts

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

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

Answer 17

在 Angular 中，您可以通过两种方式注册服务：

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

效果：

• 适用于所有组件
• 终生适用

如果您将服务注册到延迟加载的模块中，您应该小心：

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

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

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

效果：

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

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

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

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

Answer 18

块引用

在组件中注册提供者

这是一个修改后的 HeroesComponent，它将 HeroService 注册到它的 providers 数组中。

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

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

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