【轉載】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