import {Component,View,bootstrap,NgFor} from "angular2/angular2";import {NameService} from "./services/NameService";@Com" />

Angular没有NameService的提供者

typescript angular systemjs

237085 观看

17回复

2270 作者的声誉

将类加载到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的提供者”......

有人可以帮助我发现我的代码中的小问题吗?

作者: M.Svrcek 的来源 发布者: 2015 年 6 月 1 日

回应 (17)


6

5986 作者的声誉

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)插件并让它首先在那里工作。它将为您设置一切。一旦它在那里工作,将其复制到您的其他环境并对该环境的任何问题进行分类。

作者: unobf 发布者: 01.06.2015 09:43

372

24279 作者的声誉

决定

你必须使用providers而不是injectables

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

这里填写代码示例

作者: Klas Mellbourn 发布者: 30.08.2015 04:55

4

3315 作者的声誉

您还可以在bootstrap-command中声明依赖项,如:

bootstrap(MyAppComponent,[NameService]);

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

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

作者: Tobias Gassmann 发布者: 11.10.2015 01:05

1

51 作者的声誉

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

bootstrap(MyAppComponent,[NameService]);
作者: preet0982 发布者: 11.10.2015 01:20

66

287870 作者的声誉

在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 doc。

作者: Mark Rajcok 发布者: 14.11.2015 11:21

30

2636 作者的声誉

截至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;
    }
}

并为您的组件配置添加providersas:

@Component({
    selector: 'my-app',
    providers: [NameService]
})
作者: magiccrafter 发布者: 31.01.2016 06:50

10

6292 作者的声誉

在Angular v2及以上它现在是:

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

作者: supercobra 发布者: 18.08.2016 07:17

18

110660 作者的声誉

你应该注入你的元数据的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答案。

作者: Pankaj Parkar 发布者: 19.12.2016 02:37

11

1131 作者的声誉

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

@NgModule({
   providers: [MyService]
})

并确保使用相同名称(区分大小写)在组件中导入,因为SystemJs区分大小写(按设计)。如果在项目文件中使用不同的路径名,如下所示:

main.module.ts

import { MyService } from './MyService';

您-component.ts

import { MyService } from './Myservice';

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

作者: saghar.fadaei 发布者: 09.01.2017 08:52

3

2221 作者的声誉

嗨,您可以在.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> `   
    })
作者: Shubham Verma 发布者: 24.01.2017 12:30

3

1312 作者的声誉

将其添加到提供者而非注射剂

@Component({
    selector:'my-app',
    providers: [NameService]
})
作者: Gopinath Kaliappan 发布者: 18.02.2017 07:00

4

1905 作者的声誉

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

原因:在使用任何自定义服务之前,首先必须通过将其添加到提供者列表中将其注册到NgModule:

解:

@NgModule({
    imports: [...],
    providers: [CustomServiceName]
})
作者: Suneet Bansal 发布者: 28.04.2017 11:07

2

42664 作者的声誉

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

在角度文档中查看此部分:

在组件中注册提供程序

这是一个修订的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 providers数组中注册。但由于HeroService仅在Heroes功能区域内使用,而在其他地方使用,因此在HeroesComponent中注册它是有意义的。

另请参阅“我应该将应用范围的提供程序添加到根AppModule还是根AppComponent?” 在NgModule FAQ中。

因此,在您的情况下,只需将注射剂更改为以下提供者:

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

另外在Angular的新版本中,@ View和其他一些东西都没了。

有关更多信息,请访问此处

作者: Alireza 发布者: 30.05.2017 12:56

1

31 作者的声誉

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

或者如果您想在整个应用程序中访问您的服务,您可以通过应用程序提供商

作者: sachinkasana 发布者: 27.07.2017 05:36

1

259 作者的声誉

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

//这里我的服务是CarService

app.module.ts

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

providers: [CarsService] // you can include as many services you have 
作者: Surendra Parchuru 发布者: 12.09.2017 03:55

3

478 作者的声誉

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

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

SRC /应用程序/ user.service.0.ts

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

@Injectable({
  providedIn: 'root',
})
export class UserService {
}
作者: Derrick Miller 发布者: 14.08.2018 05:59

0

298 作者的声誉

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

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

功效:

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

如果将服务注册到延迟加载的模块,则应该注意:

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

  • 只有在加载模块时,该服务才能在终身应用程序中使用

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

功效:

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

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

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

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

作者: Rzv Razvan 发布者: 17.11.2018 10:24
32x32