本系列教程的開發(fā)環(huán)境及開發(fā)語言:
FactoryProvider 用于告訴 Injector (注入器),通過調(diào)用 useFactory
對(duì)應(yīng)的函數(shù),返回 Token
對(duì)應(yīng)的依賴對(duì)象。
function serviceFactory() {
return new Service();
}
const provider: FactoryProvider = {
provide: 'someToken', useFactory: serviceFactory, deps: []
};
export interface FactoryProvider {
// 用于設(shè)置與依賴對(duì)象關(guān)聯(lián)的Token值,Token值可能是Type、InjectionToken、
// OpaqueToken的實(shí)例或字符串
provide: any;
// 設(shè)置用于創(chuàng)建對(duì)象的工廠函數(shù)
useFactory: Function;
// 依賴對(duì)象列表
deps?: any[];
// 用于標(biāo)識(shí)是否multiple providers,若是multiple類型,則返回與Token關(guān)聯(lián)的依賴
// 對(duì)象列表
multi?: boolean;
}
介紹完基礎(chǔ)知識(shí),接下來我們馬上進(jìn)入正題。不知道大家是否還記得,之前我們創(chuàng)建過的 HeroComponent
組件:
import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';
@Component({
selector: 'app-hero',
template: `
<ul>
<li *ngFor="let hero of heros">
ID: {{hero.id}} - Name: {{hero.name}}
</li>
</ul>
`
})
export class HeroComponent implements OnInit {
constructor(private heroService: HeroService) { }
heros: Array<{ id: number; name: string }>;
ngOnInit() {
this.heros = this.heroService.getHeros();
}
}
那么現(xiàn)在問題來了,假設(shè)我們想在獲取英雄數(shù)據(jù)時(shí),輸出調(diào)試信息,那應(yīng)該怎么辦?What ~,這個(gè)問題不是很簡(jiǎn)單么,直接使用 console.log
API 輸出相應(yīng)信息不就行了么:
console.log('Fetching heros...');
this.heros = this.heroService.getHeros();
那問題又來了,如果多個(gè)組件都使用 HeroService
去獲取英雄數(shù)據(jù),那么是不是每個(gè)組件都得添加對(duì)應(yīng)的語句。另外如果要修改輸出的調(diào)試信息,那就得修改程序中多個(gè)地方。其實(shí)我們一般只需要在開發(fā)階段,輸出調(diào)試信息,因此上面的方案不合理,也不夠靈活。
其實(shí)我們可以借鑒之前引入 HeroService
服務(wù)的思路,創(chuàng)建一個(gè) LoggerService
來解決上面提到的問題。
export class LoggerService {
constructor(private enable: boolean) { }
log(message: string) {
if(this.enable) {
console.log(`LoggerService: ${message}`);
}
}
}
@NgModule({
...
providers: [
HeroService,
LoggerService
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';
import { LoggerService } from './../logger.service';
@Component({
selector: 'app-hero',
template: `
<ul>
<li *ngFor="let hero of heros">
ID: {{hero.id}} - Name: {{hero.name}}
</li>
</ul>
`
})
export class HeroComponent implements OnInit {
heros: Array<{ id: number; name: string }>;
constructor(private heroService: HeroService,
private loggerService: LoggerService) { }
ngOnInit() {
this.loggerService.log('Fetching heros...');
this.heros = this.heroService.getHeros();
}
}
以上代碼運(yùn)行后會(huì)拋出以下異常信息:
Uncaught Error: Can't resolve all parameters for LoggerService: (?).
有的讀者,眼睛一亮,可能是你在創(chuàng)建 LoggerService
服務(wù)時(shí),忘記使用 @Injectable
裝飾器了。哈哈,其實(shí)我是故意的,但我加上 @Injectable()
后,還是拋出了以下異常:
ERROR Error: No provider for Boolean!
為什么會(huì)出現(xiàn)上面的異常信息呢?我們?cè)倏匆幌虑懊鎰?chuàng)建的 LoggerService
服務(wù):
export class LoggerService {
constructor(private enable: boolean) { }
// ...
}
在 Angular 中我們通過構(gòu)造注入的方式注入依賴對(duì)象, private enable: boolean
這種方式表示我們要注入 Type
類型的對(duì)象。然后 boolean
是表示基本數(shù)據(jù)類型,并不是所需的 Type
類型:
export function isType(v: any): v is Type<any> {
return typeof v === 'function';
}
接下來我們?cè)賮砜匆幌伦钤鐠伋龅漠惓#?/p>
Uncaught Error: Can't resolve all parameters for LoggerService: (?).
其實(shí)問題的答案也在 LoggerService
類的構(gòu)造函數(shù)中,在創(chuàng)建 LoggerService
對(duì)象時(shí),我們需要設(shè)置 enable
參數(shù)的值。那么如何解決呢? 當(dāng)然可以使用我們的主角 - FactoryProvider
。具體如下:
@NgModule({
...,
providers: [
HeroService,
{
provide: LoggerService,
useFactory: () => {
return new LoggerService(true);
}
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
當(dāng)更新完代碼,然后再來一個(gè)華麗的保存操作,最后打開你的控制臺(tái),你將看到預(yù)期的輸出信息:
LoggerService: Fetching heros...
難道就這樣結(jié)束了,關(guān)于 FactoryProvider
的相關(guān)內(nèi)容先告一段落,下一篇我們將介紹如何使用 FactoryProvider
配置依賴對(duì)象。
更多建議: