學(xué)習(xí)目錄

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),龍川企業(yè)網(wǎng)站建設(shè),龍川品牌網(wǎng)站建設(shè),網(wǎng)站定制,龍川網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,龍川網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

• Angular 4 依賴注入教程之一 依賴注入簡介
• Angular 4 依賴注入教程之二 組件服務(wù)注入
• Angular 4 依賴注入教程之三 ClassProvider的使用
• Angular 4 依賴注入教程之四 FactoryProvider的使用
• Angular 4 依賴注入教程之五 FactoryProvider配置依賴對象
• Angular 4 依賴注入教程之六 Injectable 裝飾器
• Angular 4 依賴注入教程之七 ValueProvider的使用
• Angular 4 依賴注入教程之八 InjectToken的使用

本文主要給大家介紹了關(guān)于Angular 4依賴注入之FactoryProvider配置依賴對象的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來看看詳細的介紹：

本系列教程的開發(fā)環(huán)境及開發(fā)語言：

• Angular 4 +
• Angular CLI
• TypeScript

基礎(chǔ)知識

Console 對象

Console 對象可以在任何全局對象中訪問，如 Window，WorkerGlobalScope 以及通過屬性工作臺提供的特殊定義。在瀏覽器中我們可以通過 Window.console 訪問 console 對象，使用示例如下：

console.log('My nickname is semlinker');

FactoryProvider 的作用

FactoryProvider 用于告訴 Injector (注入器)，通過調(diào)用 useFactory 對應(yīng)的函數(shù)，返回 Token 對應(yīng)的依賴對象。

FactoryProvider 接口

export interface FactoryProvider {
 // 用于設(shè)置與依賴對象關(guān)聯(lián)的Token值，Token值可能是Type、InjectionToken、
 // OpaqueToken的實例或字符串
 provide: any;
 // 設(shè)置用于創(chuàng)建對象的工廠函數(shù)
 useFactory: Function;
 // 依賴對象列表
 deps?: any[];
 // 用于標(biāo)識是否multiple providers，若是multiple類型，則返回與Token關(guān)聯(lián)的依賴
 // 對象列表
 multi?: boolean;
}

在 FactoryProvider的使用 這篇文章中，我們已經(jīng)介紹了 FactoryProvider 的一些相關(guān)知識。接下來我們將介紹如何使用 FactoryProvider 配置依賴對象。

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 的一大特色：

跨平臺開發(fā)

學(xué)習(xí)如何基于 Angular 構(gòu)建應(yīng)用程序，并復(fù)用代碼和技能來構(gòu)建適用于所有平臺的應(yīng)用。比如：Web應(yīng)用、移動Web應(yīng)用、原生移動應(yīng)用和原生桌面應(yīng)用等。

沒錯，Angular 框架的一大特色就是跨平臺開發(fā)。回到正題，不知道讀者有沒有察覺到，在 LoggerService 類中的 log() 方法內(nèi)，我們是直接使用 console.log() 方法輸出調(diào)試信息。雖然在大多數(shù)情況下，我們的應(yīng)用都是運行在瀏覽器環(huán)境下，但 console.log() 存在兼容性問題 (了解詳細信息 - Can I Use)。除此之外，假如日后我們的應(yīng)用需要運行在其它平臺下，就會出現(xiàn)問題。

為了解決上述問題，我們可以創(chuàng)建一個 ConsoleService 服務(wù)，且該服務(wù)需實現(xiàn)統(tǒng)一的 Console 接口。但本文的重點不在這里，因此我們先簡單實現(xiàn)一個 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 ，成功保存后，你會看到以下異常信息：

app.module.ts (27,16): Supplied parameters do not match any signature of call target.

這說明提供的參數(shù)與調(diào)用目標(biāo)的簽名不匹配，這是因為在 AppModule 中，LoggerService 的配置方式是：

{
 provide: LoggerService, 
 useFactory: () => {
 return new LoggerService(true);
}

而此時 LoggerService 構(gòu)造函數(shù)輸入?yún)?shù)的個數(shù)為兩個，因此會拋出上面的異常。那么我們應(yīng)該怎么解決這個問題呢？這時我們就要利用 FactoryProvider 接口中定義的 deps 屬性，來聲明 LoggerService 所依賴的對象。

配置 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)更新完代碼，然后再來一個華麗的保存操作，最后打開你的控制臺，你又看到預(yù)期的輸出信息：

LoggerService: Fetching heros...

我有話說

工廠函數(shù)是用來干嘛的？

在現(xiàn)實生活中，工廠是用來生產(chǎn)產(chǎn)品的，如鞋子工廠用來生產(chǎn)鞋子。而 FactoryProvider 接口中 useFactory 屬性對應(yīng)的工廠函數(shù)就是用來創(chuàng)建依賴對象。此外生產(chǎn)一雙鞋子也需要對應(yīng)的材料，如鞋底、鞋帶等，而創(chuàng)建依賴對象也可能需要依賴其它對象，因此 FactoryProvider 接口中定義了 deps 屬性用來聲明依賴對象列表。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者使用Angular 4能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

本文題目：Angular4依賴注入學(xué)習(xí)教程之FactoryProvider配置依賴對象（五）
當(dāng)前網(wǎng)址：http://chinadenli.net/article20/gojcco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、標(biāo)簽優(yōu)化、全網(wǎng)營銷推廣、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)