在Angular中有很多方式可以将服务类注册到注入器中:
@Injectable 元数据中的providedIn属性
@NgModule 元数据中的 providers属性
@Component 元数据中的 providers属性
创建一个文件名叫名 hero.service.ts叫 hero 的服务
hero.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class HeroService {
constructor() { }
// 新增加setName方法
setName(name:string):string{
return `姓名：${name}`;
}
}
1.@Injectable 元数据中的providedIn属性
providedIn: 'root' 告诉 Angular在根注入器中注册这个服务,这也是使用CLI生成服务时默认的方式.
这种方式注册,不需要再@NgModule装饰器中写providers,而且在代码编译打包时,可以执行摇树优化，会移除所有没在应用中使用过的服务。推荐使用此种方式注册服务
使用providedIn的话，后面直接在项目中使用了。
使用：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']
})
export class HeroesComponent implements OnInit {
constructor(private heroService:HeroService) { }
ngOnInit() {
this.heroService.setName('张三');
}
}
2.@NgModule 元数据中的 providers属性
改写 hero.service.ts里面的@Injectable，如下
import { Injectable } from '@angular/core';
@Injectable() // 删掉了 {providedIn: 'root'}
export class HeroService {...}
xx.module.ts , 例如app.module.ts
...
@NgModule({
providers: [
HeroService,
// { provide: HeroService, useValue: HeroService }
],
})
...
然后就可以在使用拉，使用方法，同1 heroes.component.ts文件
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'})
//component.ts
constructor(private heroService:HeroService) { }
@NgModule 元数据中的 providers属性
// service.ts
@Injectable()
//module.ts
@NgModule({
providers: [HeroService ]
})
@Component 元数据中的 providers属性文章来源：https://www.toymoban.com/news/detail-659188.html
// service.ts
@Injectable()
// component.ts
@Component({
...
selector: 'app-heroes',
providers: [ HeroService ]
})
原文链接：https://blog.csdn.net/sllailcp/article/details/102548144文章来源地址https://www.toymoban.com/news/detail-659188.html
到了这里，关于angular注入方法providers的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
