這篇文章主要為大家展示了“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è)合作伙伴！

開(kāi)發(fā)環(huán)境及開(kāi)發(fā)語(yǔ)言：

• Angular 4 +

• Angular CLI

• TypeScript

基礎(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: `
 

 
 ID: {{hero.id}} - Name: {{hero.name}}
 
 
 `
})
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: `
 

 
 ID: {{hero.id}} - Name: {{hero.name}}
 
 
 `
})
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 {
 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...

以上是“Angular4中FactoryProvidervue”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！