369

我在将类加载到 Angular 组件时遇到问题。我一直在尝试解决它很长时间；我什至尝试将它们全部加入一个文件中。我所拥有的是：

应用程序.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);

服务/Na​​meService.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。

有人可以帮我发现我的代码的问题吗？

4

18 回答 18

514

你必须使用providers而不是injectables

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

完整的代码示例在这里。

于 2015-08-30T16:55:30.677 回答
82

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

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

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

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

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

Plunker

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

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

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

于 2015-11-14T23:21:39.947 回答
35

从 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]
})
于 2016-01-31T18:50:08.037 回答
25

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

@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答案。

于 2016-12-19T14:37:25.927 回答
20

令人震惊的是，最新版本的 Angular 中的语法再次发生了变化 :-) 来自Angular 6 文档：

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

src/app/user.service.0.ts

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

@Injectable({
  providedIn: 'root',
})
export class UserService {
}
于 2018-08-14T17:59:53.647 回答
14

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

@NgModule({
   providers: [MyService]
})

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

主模块.ts

import { MyService } from './MyService';

你的组件.ts

import { MyService } from './Myservice';

然后 System js 将进行双重导入

于 2017-01-09T08:52:54.673 回答
13

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

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

于 2016-08-18T19:17:37.507 回答
7

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

于 2015-06-01T21:43:47.733 回答
6

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

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

解决方案：

@NgModule({
    imports: [...],
    providers: [CustomServiceName]
})
于 2017-04-28T11:07:38.233 回答
5

您还可以在 bootstrap-command 中声明依赖项，例如：

bootstrap(MyAppComponent,[NameService]);

至少那是在 alpha40 中对我有用的。

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

于 2015-10-11T13:05:52.813 回答
4

嗨，您可以在 .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> `   
    })
于 2017-01-24T12:30:00.767 回答
4

将其添加到提供程序而不是注射剂 

@Component({
    selector:'my-app',
    providers: [NameService]
})
于 2017-02-18T19:00:20.127 回答
3

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

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

效果：

  • 适用于所有组件
  • 终生申请可用

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

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

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

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

效果：

  • 将一个单独的Service实例注入到组件中

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

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

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

于 2018-11-17T10:24:23.383 回答
2

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

在 Angular 文档中查看此部分：

在组件中注册提供程序

这是一个修改过的 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 提供程序数组中注册。但是由于 HeroService 只在 Heroes 功能区域中使用，而在其他地方没有使用，因此在 HeroesComponent 中注册它是有意义的。

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

因此，在您的情况下，只需将可注射剂更改为提供程序，如下所示：

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

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

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

于 2017-05-30T12:56:58.460 回答
2

将您的服务添加到 app.module.ts 文件中的 providers[] 数组。如下所示

// 这里我的服务是 CarService

app.module.ts

import {CarsService} from './cars.service';

providers: [CarsService] // you can include as many services you have
于 2017-09-12T03:55:13.100 回答
1

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

bootstrap(MyAppComponent,[NameService]);
于 2015-10-11T13:20:14.637 回答
1

块引用

在组件中注册提供程序

这是一个修改过的 HeroesComponent，它在它的 providers 数组中注册了 HeroService。

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

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

@Component({
  selector: 'my-heroes',
  providers: [HeroService],
  template: `
  `
})
export class HeroesComponent { }
于 2019-07-02T06:43:16.130 回答
1

将@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]
})

或者如果您想在整个应用程序中访问您的服务，您可以传入应用程序提供程序

于 2017-07-27T05:36:01.430 回答