angular 服务providers

在Angular中，有很多方法可以在注入器中注册服务类：

@Injectable元数据的providedIn属性@NgModule元数据的providers属性@Component元数据的providers属性创建文件名为hero.service.ts的服务

hero.service.ts

import { injectable } from ' @ angular/core '； @ injectable (provided in : ' root '，) (exportclassheroservice ) constructor ) }//setName方法set name )将name3360更新为

providedIn: 'root '指示Angular向根接口注册服务。 这也是使用CLI生成服务时的缺省方法。

用这种方式注册后，就不需要在@NgModule复制器上写providers了。 此外，在编译打包代码时，还可以执行锁定树优化，以删除APP应用程序中未使用的所有服务。 建议使用这种方式注册服务

使用providedIn后，剩下的就直接在项目中使用了。

使用： heroes.component.ts

import { Component，OnInit } from '@angular/core '； import { hero service } from ' ./hero.service ' @ component (selector 3360 ' app-heroes '，templateurl3360'./Heroes syle URLs : [ './heroes.com ponent.CSS ' ] } exportclassheroescomponentimplementsoninit { constructor (private hero )

33558 www.Sina.com/hero.service.ts中的@Injectable如下

import { injectable } from ' @ angular/core '； @Injectable ()//providedin:'root ' ) exportclassheroservice )…)删除了xx.module.ts，例如app.module.ts

. @ ng module (providers : [ hero service，//{ provide: HeroService，useValue: HeroService } ]，) )然后使用拉拉

1.@Injectable 元数据中的providedIn属性

hero.service.ts的@Injectable，删除{providedIn: 'root'}，同上2 2.@NgModule 元数据中的providers属性

重写heroes.component.ts

import { Component，OnInit } from '@angular/core '； import { hero service } from ' ./hero.service ' @ component (selector 3360 ' app-heroes '，templateurl3360'./Heroes style URLs : [ './heroes.com ponent.CSS ' ]， providers : [ hero service ]//providers : [ hero service ] } ) exportclassheroescomponentimplementsoninit { construcon }

三种用法总结：

@Injectable元数据的预配属性

//service.ts @ injectable ({ provided in : ' root ' } ) @NgModule元数据的providers属性

//service.ts @ injectable (//module.ts @ ng module ({ providers 3360 [ hero service ] ) ) @Component元数据的providers属性

//service.ts @ injectable (//component.ts @ component ({ . selector 3360 ' app-heroes '，providers3360[Hero] )