您好,登錄后才能下訂單哦!
學(xué)習(xí)目錄
本文主要給大家介紹了關(guān)于Angular 4依賴注入之FactoryProvider配置依賴對(duì)象的相關(guān)內(nèi)容,分享出來供大家參考學(xué)習(xí),下面來看看詳細(xì)的介紹:
本系列教程的開發(fā)環(huán)境及開發(fā)語言:
基礎(chǔ)知識(shí)
Console 對(duì)象
Console 對(duì)象可以在任何全局對(duì)象中訪問,如 Window,WorkerGlobalScope 以及通過屬性工作臺(tái)提供的特殊定義。在瀏覽器中我們可以通過 Window.console 訪問 console 對(duì)象,使用示例如下:
console.log('My nickname is semlinker');
FactoryProvider 的作用
FactoryProvider 用于告訴 Injector (注入器),通過調(diào)用 useFactory 對(duì)應(yīng)的函數(shù),返回 Token 對(duì)應(yīng)的依賴對(duì)象。
FactoryProvider 接口
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; }
在 FactoryProvider的使用 這篇文章中,我們已經(jīng)介紹了 FactoryProvider 的一些相關(guān)知識(shí)。接下來我們將介紹如何使用 FactoryProvider 配置依賴對(duì)象。
FactoryProvider
俗話說得好,溫故而知新。我們先來回顧一下上一節(jié)創(chuàng)建的 LoggerService 服務(wù):
export class LoggerService { constructor(private enable: boolean) { } log(message: string) { if(this.enable) { console.log(`LoggerService: ${message}`); } } }
LoggerService 的正確配置方式如下:
@NgModule({ ..., providers: [ HeroService, { provide: LoggerService, useFactory: () => { return new LoggerService(true); } } ], bootstrap: [AppComponent] }) export class AppModule { }
在繼續(xù)介紹前,我們先來了解一下 Angular 的一大特色:
跨平臺(tái)開發(fā)
學(xué)習(xí)如何基于 Angular 構(gòu)建應(yīng)用程序,并復(fù)用代碼和技能來構(gòu)建適用于所有平臺(tái)的應(yīng)用。比如:Web應(yīng)用、移動(dòng)Web應(yīng)用、原生移動(dòng)應(yīng)用和原生桌面應(yīng)用等。
沒錯(cuò),Angular 框架的一大特色就是跨平臺(tái)開發(fā)?;氐秸},不知道讀者有沒有察覺到,在 LoggerService 類中的 log() 方法內(nèi),我們是直接使用 console.log() 方法輸出調(diào)試信息。雖然在大多數(shù)情況下,我們的應(yīng)用都是運(yùn)行在瀏覽器環(huán)境下,但 console.log() 存在兼容性問題 (了解詳細(xì)信息 - Can I Use)。除此之外,假如日后我們的應(yīng)用需要運(yùn)行在其它平臺(tái)下,就會(huì)出現(xiàn)問題。
為了解決上述問題,我們可以創(chuàng)建一個(gè) ConsoleService 服務(wù),且該服務(wù)需實(shí)現(xiàn)統(tǒng)一的 Console 接口。但本文的重點(diǎn)不在這里,因此我們先簡(jiǎn)單實(shí)現(xiàn)一個(gè) ConsoleService 服務(wù):
export class ConsoleService { log(message) { console.log(`ConsoleService: ${message}`); } }
接下來我們就需要更新先前的 LoggerService 服務(wù):
export class LoggerService { constructor(private enable: boolean, consoleService: ConsoleService) { } log(message: string) { if (this.enable) { console.log(`LoggerService: ${message}`); } } }
但當(dāng)我們更新完 LoggerService ,成功保存后,你會(huì)看到以下異常信息:
app.module.ts (27,16): Supplied parameters do not match any signature of call target.
這說明提供的參數(shù)與調(diào)用目標(biāo)的簽名不匹配,這是因?yàn)樵?AppModule 中,LoggerService 的配置方式是:
{ provide: LoggerService, useFactory: () => { return new LoggerService(true); }
而此時(shí) LoggerService 構(gòu)造函數(shù)輸入?yún)?shù)的個(gè)數(shù)為兩個(gè),因此會(huì)拋出上面的異常。那么我們應(yīng)該怎么解決這個(gè)問題呢?這時(shí)我們就要利用 FactoryProvider 接口中定義的 deps 屬性,來聲明 LoggerService 所依賴的對(duì)象。
配置 deps 屬性
{ provide: LoggerService, useFactory: (consoleService) => { return new LoggerService(true, consoleService); }, deps: [ConsoleService] }
更新 AppModule
@NgModule({ ..., providers: [ HeroService, ConsoleService, { provide: LoggerService, useFactory: (consoleService) => { return new LoggerService(true, consoleService); }, deps: [ConsoleService] } ], bootstrap: [AppComponent] }) export class AppModule { }
當(dāng)更新完代碼,然后再來一個(gè)華麗的保存操作,最后打開你的控制臺(tái),你又看到預(yù)期的輸出信息:
LoggerService: Fetching heros...
我有話說
工廠函數(shù)是用來干嘛的?
在現(xiàn)實(shí)生活中,工廠是用來生產(chǎn)產(chǎn)品的,如鞋子工廠用來生產(chǎn)鞋子。而 FactoryProvider 接口中 useFactory 屬性對(duì)應(yīng)的工廠函數(shù)就是用來創(chuàng)建依賴對(duì)象。此外生產(chǎn)一雙鞋子也需要對(duì)應(yīng)的材料,如鞋底、鞋帶等,而創(chuàng)建依賴對(duì)象也可能需要依賴其它對(duì)象,因此 FactoryProvider 接口中定義了 deps 屬性用來聲明依賴對(duì)象列表。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者使用Angular 4能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。