這篇文章主要為大家展示了“Angular4中FactoryProvidervue”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular4中FactoryProvidervue”這篇文章吧。
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的沈河網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
開發(fā)環(huán)境及開發(fā)語言:
Angular 4 +
Angular CLI
TypeScript
基礎(chǔ)知識(shí)
FactoryProvider 的作用
FactoryProvider 用于告訴 Injector (注入器),通過調(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í),接下來我們馬上進(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 來解決上面提到的問題。
創(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 中我們通過構(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í)問題的答應(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)更新完代碼,然后再來一個(gè)華麗的保存操作,最后打開你的控制臺(tái),你將看到預(yù)期的輸出信息:
LoggerService: Fetching heros...
以上是“Angular4中FactoryProvidervue”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章標(biāo)題:Angular4中FactoryProvidervue
鏈接URL:http://www.muchs.cn/article8/pgdjop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、品牌網(wǎng)站建設(shè)、服務(wù)器托管、軟件開發(fā)、定制開發(fā)、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)