Angular 没有名称服务提供商

Question

我在将 class 加载到 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-命令中声明依赖项，例如：

bootstrap(MyAppComponent,[NameService]);

至少这对我在 alpha40 中有用。

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

Answer 4

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

bootstrap(MyAppComponent,[NameService]);

Answer 5

在Angular2中有3个地方可以"provide"服务：

bootstrap
根组件
其他组件或指令

"The bootstrap provider option is intended for configuring and overriding Angular's own preregistered services, such as its routing support." -- reference

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

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

Plunker

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

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

有关详细信息，请参阅 Hierarchical Injectors 文档。

Answer 6

截至 Angular 2 测试版：

将 @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 元数据选项，如已接受的答案所示。

Answer 9

您应该在 AppModule 的 NgModule 元数据的提供程序数组中注入 NameService。

@NgModule({
   providers: [MyService]
})

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

main.module.ts

import { MyService } from './MyService';

你的-component.ts

import { MyService } from './Myservice';

然后 System 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

将其添加到 供应商 而不是 注射器

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

Answer 12

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

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

解法：

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

Answer 13

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

查看 angular 文档中的这一部分：

Registering providers in a component

Here's a revised HeroesComponent that registers the HeroService in its providers array.

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 和其他一些东西也不见了。

有关详细信息，请访问 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:

Beginning with Angular 6.0, the preferred way to create a singleton services is to specify on the service that it should be provided in the application root. This is done by setting providedIn to root on the service's @Injectable decorator:

src/app/user.service.0.ts

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

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

Answer 17

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

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

效果：

适用于所有组件
终身申请可用

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

该服务仅适用于在该模块中声明的组件
只有在加载模块时，该服务才会在生命周期应用程序中可用

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

效果：

将向组件中注入一个单独的服务实例

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

注入服务的实例将仅在组件及其所有子组件中可用。
实例将在组件生命周期内可用。

Answer 18

Blockquote

在组件中注册提供者

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

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

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

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

Angular 没有名称服务提供商

Angular no provider for NameService

typescript

angular

systemjs