【转载】angular 服务providers

日落夕阳

在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'})
@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

来源：https://www.cnblogs.com/maruko/p/12885081.html