java nameservice,Angular没有NameService的提供者

回答(17)

2 years ago

您必须使用 providers 而不是 injectables

@Component({

selector: 'my-app',

providers: [NameService]

})

2 years ago

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

bootstrap

根组件

其他组件或指令

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

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

@Component({

providers: [NameService],

...

)}

export class AppComponent { ... }

Plunker

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

@Component({

providers: [NameService],

...

)}

export class SomeOtherComponentOrDirective { ... }

2 years ago

从Angular 2 Beta开始：

将 @Injectable 添加到您的服务中：

@Injectable()

export class NameService {

names: Array;

constructor() {

this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];

}

getNames() {

return this.names;

}

}

并在组件配置中添加 providers ：

@Component({

selector: 'my-app',

providers: [NameService]

})

2 years ago

你应该在 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答案 .

2 years ago

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

@NgModule({

providers: [MyService]

})

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

main.module.ts

import { MyService } from './MyService';

您-component.ts

import { MyService } from './Myservice';

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

2 years ago

在Angular v2及以上它现在是：

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

2 years ago

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;

constructor() {

this._names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];

}

get names() {

return this._names;

}

}

然后在你的应用程序中你可以简单地做：

this.names = nameService.names;

我建议你去plnkr.co并创建一个新的Angular 2(ES6)插件并让它首先在那里工作 . 它将为您设置一切 . 一旦它在那里工作，将其复制到您的其他环境并对该环境的任何问题进行分类 .

2 years ago

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

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

Solution:

@NgModule({

imports: [...],

providers: [CustomServiceName]

})

2 years ago

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

bootstrap(MyAppComponent,[NameService]);

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

2 years ago

Hi , You can use this in your .ts file :

首先在此.ts文件中导入您的服务：

import { Your_Service_Name } from './path_To_Your_Service_Name';

然后在同一个文件中添加 providers: [Your_Service_Name] ：

@Component({

selector: 'my-app',

providers: [Your_Service_Name],

template: `

Hello World

`

})

2 years ago

添加到 providers 而不是 injectables

@Component({

selector:'my-app',

providers: [NameService]

})

2 years ago

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

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

src/app/user.service.0.ts

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

@Injectable({

providedIn: 'root',

})

export class UserService {

}

2 years ago

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

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

在组件中注册提供程序这是一个修订的HeroesComponent，它在其providers数组中注册HeroService .

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

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

@Component({

selector: 'my-heroes',

providers: [HeroService],

template: `

Heroes

`

})

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和其他一些东西都没了 .

有关详细信息，请访问here .

2 years ago

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

bootstrap(MyAppComponent,[NameService]);

2 years ago

将@Injectable添加到您的服务中：

export class NameService {

names: Array;

constructor() {

this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];

}

getNames() {

return this.names;

}

}

并在您的组件中添加提供程序：

@Component({

selector: 'my-app',

providers: [NameService]

})

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

2 years ago

加您对app.module.ts文件中的providers []数组的服务 . 如下

//这里我的服务是CarService

app.module.ts

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

providers: [CarsService] // you can include as many services you have

2 years ago

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

1. Register a service in module or root component

功效：

适用于所有组件

终身申请时可用

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

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

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

2. Register a service into any other application component

功效：

将向服务组件注入单独的Service实例

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

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

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