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

前言

本文屬于Angular 4 依賴注入學(xué)習(xí)系列的第四篇，主要介紹了Angular 4 依賴注入之FactoryProvider的使用，感興趣的朋友們下面來看看詳細(xì)的介紹：

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

基礎(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è)問題不是很簡單么，直接使用 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)試信息，因此上面的方案不合理，也不夠靈活。