FactoryProvider的使用

閱讀須知

本系列教程的開(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)的依賴(lài)對(duì)象。

FactoryProvider 的使用

function serviceFactory() { 
    return new Service();
}


const provider: FactoryProvider = {
  provide: 'someToken', useFactory: serviceFactory, deps: []
};

FactoryProvider 接口

export interface FactoryProvider {
  // 用于設(shè)置與依賴(lài)對(duì)象關(guān)聯(lián)的Token值，Token值可能是Type、InjectionToken、
  // OpaqueToken的實(shí)例或字符串
  provide: any;
  // 設(shè)置用于創(chuàng)建對(duì)象的工廠(chǎng)函數(shù)
  useFactory: Function;
  // 依賴(lài)對(duì)象列表
  deps?: any[];
  // 用于標(biāo)識(shí)是否multiple providers，若是multiple類(lèi)型，則返回與Token關(guān)聯(lián)的依賴(lài)
  // 對(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)造注入的方式注入依賴(lài)對(duì)象， private enable: boolean 這種方式表示我們要注入 Type 類(lèi)型的對(duì)象。然后 boolean 是表示基本數(shù)據(jù)類(lèi)型，并不是所需的 Type 類(lèi)型：

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)題的答案也在 LoggerService 類(lèi)的構(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 配置依賴(lài)對(duì)象。