Angular 4 依賴注入學(xué)習(xí)教程之FactoryProvider的使用(四)
學(xué)習(xí)目錄
- Angular 4 依賴注入教程之一 依賴注入簡(jiǎn)介
- Angular 4 依賴注入教程之二 組件服務(wù)注入
- Angular 4 依賴注入教程之三 ClassProvider的使用
- Angular 4 依賴注入教程之四 FactoryProvider的使用
- Angular 4 依賴注入教程之五 FactoryProvider配置依賴對(duì)象
- Angular 4 依賴注入教程之六 Injectable 裝飾器
- Angular 4 依賴注入教程之七 ValueProvider的使用
- Angular 4 依賴注入教程之八 InjectToken的使用
前言
本文屬于Angular 4 依賴注入學(xué)習(xí)系列的第四篇,主要介紹了Angular 4 依賴注入之FactoryProvider的使用,感興趣的朋友們下面來(lái)看看詳細(xì)的介紹:
本系列教程的開(kāi)發(fā)環(huán)境及開(kāi)發(fā)語(yǔ)言:
基礎(chǔ)知識(shí)
FactoryProvider 的作用
FactoryProvider 用于告訴 Injector (注入器),通過(guò)調(diào)用 useFactory 對(duì)應(yīng)的函數(shù),返回 Token 對(duì)應(yīng)的依賴對(duì)象。
FactoryProvider 的使用
function serviceFactory() { return new Service(); } const provider: FactoryProvider = { provide: 'someToken', useFactory: serviceFactory, deps: [] };
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
介紹完基礎(chǔ)知識(shí),接下來(lái)我們馬上進(jìn)入正題。不知道大家是否還記得,之前我們創(chuàng)建過(guò)的 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)在問(wèn)題來(lái)了,假設(shè)我們想在獲取英雄數(shù)據(jù)時(shí),輸出調(diào)試信息,那應(yīng)該怎么辦?What ~,這個(gè)問(wèn)題不是很簡(jiǎn)單么,直接使用 console.log API
輸出相應(yīng)信息不就行了么:
console.log('Fetching heros...'); this.heros = this.heroService.getHeros();
那問(wèn)題又來(lái)了,如果多個(gè)組件都使用 HeroService 去獲取英雄數(shù)據(jù),那么是不是每個(gè)組件都得添加對(duì)應(yīng)的語(yǔ)句。另外如果要修改輸出的調(diào)試信息,那就得修改程序中多個(gè)地方。其實(shí)我們一般只需要在開(kāi)發(fā)階段,輸出調(diào)試信息,因此上面的方案不合理,也不夠靈活。
其實(shí)我們可以借鑒之前引入 HeroService 服務(wù)的思路,創(chuàng)建一個(gè) LoggerService 來(lái)解決上面提到的問(wèn)題。
創(chuàng)建 LoggerService 服務(wù)
export class LoggerService { constructor(private enable: boolean) { } log(message: string) { if(this.enable) { console.log(`LoggerService: ${message}`); } } }
配置 LoggerService 服務(wù)
@NgModule({ ... providers: [ HeroService, LoggerService ], bootstrap: [AppComponent] }) export class AppModule { }
使用 LoggerService 服務(wù)
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 中我們通過(guò)構(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'; }
接下來(lái)我們?cè)賮?lái)看一下最早拋出的異常:
Uncaught Error: Can't resolve all parameters for LoggerService: (?).
其實(shí)問(wèn)題的答應(yīng)也在 LoggerService 類的構(gòu)造函數(shù)中,在創(chuàng)建 LoggerService 對(duì)象時(shí),我們需要設(shè)置 enable 參數(shù)的值。那么如何解決呢? 當(dāng)然可以使用我們的主角 - FactoryProvider 。
具體如下:
使用 FactoryProvider
@NgModule({ ..., providers: [ HeroService, { provide: LoggerService, useFactory: () => { return new LoggerService(true); } } ], bootstrap: [AppComponent] }) export class AppModule { }
當(dāng)更新完代碼,然后再來(lái)一個(gè)華麗的保存操作,最后打開(kāi)你的控制臺(tái),你將看到預(yù)期的輸出信息:
LoggerService: Fetching heros...
難道就這樣結(jié)束了,關(guān)于 FactoryProvider 的相關(guān)內(nèi)容先告一段落,下一篇我們將介紹如何使用 FactoryProvider 配置依賴對(duì)象。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者使用Angular 4能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- Angular 4依賴注入學(xué)習(xí)教程之InjectToken的使用(八)
- Angular 4依賴注入學(xué)習(xí)教程之ValueProvider的使用(七)
- Angular 4依賴注入學(xué)習(xí)教程之Injectable裝飾器(六)
- Angular 4依賴注入學(xué)習(xí)教程之FactoryProvider配置依賴對(duì)象(五)
- Angular 4依賴注入學(xué)習(xí)教程之ClassProvider的使用(三)
- Angular 4依賴注入學(xué)習(xí)教程之組件服務(wù)注入(二)
- Angular 4依賴注入學(xué)習(xí)教程之簡(jiǎn)介(一)
- 深入理解Angular4中的依賴注入
相關(guān)文章
AngularJS入門教程之MVC架構(gòu)實(shí)例分析
這篇文章主要介紹了AngularJS的MVC架構(gòu),結(jié)合實(shí)例形式重點(diǎn)分析了ng-controller聲明并使用控制器的操作技巧與控制器作用域的相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11Angular2 Service實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器服務(wù)
本篇文章主要介紹了Angular2 Service實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器服務(wù) ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02Angularjs中如何使用filterFilter函數(shù)過(guò)濾
這篇文章主要介紹了Angularjs中如何使用filterFilter函數(shù)過(guò)濾的相關(guān)資料,需要的朋友可以參考下2016-02-02AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法,結(jié)合實(shí)例形式分析了AngularJS動(dòng)態(tài)編輯構(gòu)建模板的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例
這篇文章主要介紹了Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例的相關(guān)資料,這里提供實(shí)現(xiàn)思路及實(shí)現(xiàn)具體的方法,需要的朋友可以參考下2017-07-07