在Angular中有不少方式能够将服务类注册到注入器中:css
@Injectable 元数据中的providedIn属性
@NgModule 元数据中的 providers属性
@Component 元数据中的 providers属性
建立一个文件名叫名 hero.service.ts叫 hero 的服务
hero.service.tshtml
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class HeroService {
constructor() { }
// 新增长setName方法
setName(name:string):string{
return `姓名:${name}`;
}
}
1.@Injectable 元数据中的providedIn属性java
providedIn: 'root' 告诉 Angular在根注入器中注册这个服务,这也是使用CLI生成服务时默认的方式.
这种方式注册,不须要再@NgModule装饰器中写providers,并且在代码编译打包时,能够执行摇树优化,会移除全部没在应用中使用过的服务。推荐使用此种方式注册服务bootstrap
使用providedIn的话,后面直接在项目中使用了。app
使用:heroes.component.tsdom
import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service'
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
constructor(private heroService:HeroService) { }
ngOnInit() {
this.heroService.setName('张三');
}
}
2.@NgModule 元数据中的 providers属性ide
改写 hero.service.ts里面的@Injectable,以下优化
import { Injectable } from '@angular/core';
@Injectable() // 删掉了 {providedIn: 'root'}
export class HeroService {...}
xx.module.ts , 例如app.module.tsthis
...
@NgModule({
providers: [
HeroService,
// { provide: HeroService, useValue: HeroService }
],
})
...
而后就能够在使用拉,使用方法,同1 heroes.component.ts文件.net
3.@Component 元数据中的 providers属性
hero.service.ts里面的@Injectable,删掉 {providedIn: 'root'},同2 hero.service.ts文件
改写heroes.component.ts
import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service'
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css'],
providers: [HeroService] // 新增 providers: [HeroService]
})
export class HeroesComponent implements OnInit {
constructor(private heroService:HeroService) { }
ngOnInit() {
this.heroService.setName('张三');
}
}
三种用法总结:
@Injectable 元数据中的providedIn属性
//service.ts
@Injectable({providedIn:'root'})
@NgModule 元数据中的 providers属性
// service.ts
@Injectable()
//module.ts
@NgModule({
providers: [HeroService ]
})
@Component 元数据中的 providers属性
// service.ts
@Injectable()
// component.ts
@Component({
...
selector: 'app-heroes',
providers: [ HeroService ]
})
————————————————
版权声明:本文为CSDN博主「元气小仙女」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处连接及本声明。
原文连接:https://blog.csdn.net/sllailcp/article/details/102548144
tips:
NgModule的主要属性以下:
declarations:模块内部Components/Directives/Pipes的列表,声明一下这个模块内部成员providers:指定应用程序的根级别须要使用的service。(Angular2中没有模块级别的service,全部在NgModule中声明的Provider都是注册在根级别的Dependency Injector中)imports:导入其余module,其它module暴露的出的Components、Directives、Pipes等能够在本module的组件中被使用。好比导入CommonModule后就可使用NgIf、NgFor等指令。exports:用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。bootstrap:一般是app启动的根组件,通常只有一个component。bootstrap中的组件会自动被放入到entryComponents中。entryCompoenents: 不会再模板中被引用到的组件。这个属性通常状况下只有ng本身使用,通常是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。 除非不经过路由动态将component加入到dom中,不然不会用到这个属性。 每一个Angular2的应用都至少有一个模块即跟模块。————————————————版权声明:本文为CSDN博主「just run 0」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处连接及本声明。原文连接:https://blog.csdn.net/wyb_gg/java/article/details/72731373