Angular 4 依赖注入学习教程之FactoryProvider的使用（四）

学习目录

前言

本文属于Angular 4 依赖注入学习系列的第四篇，主要介绍了Angular 4 依赖注入之FactoryProvider的使用，感兴趣的朋友们下面来看看详细的介绍：

本系列教程的开发环境及开发语言：

基础知识

FactoryProvider 的作用

FactoryProvider 用于告诉 Injector (注入器)，通过调用 useFactory 对应的函数，返回 Token 对应的依赖对象。

FactoryProvider 的使用

function serviceFactory() {  return new Service();}const provider: FactoryProvider = { provide: 'someToken', useFactory: serviceFactory, deps: []};

FactoryProvider 接口

export interface FactoryProvider { // 用于设置与依赖对象关联的Token值，Token值可能是Type、InjectionToken、 // OpaqueToken的实例或字符串 provide: any; // 设置用于创建对象的工厂函数 useFactory: Function; // 依赖对象列表 deps?: any[]; // 用于标识是否multiple providers，若是multiple类型，则返回与Token关联的依赖 // 对象列表 multi?: boolean;}

FactoryProvider

介绍完基础知识，接下来我们马上进入正题。不知道大家是否还记得，之前我们创建过的 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(); }}

那么现在问题来了，假设我们想在获取英雄数据时，输出调试信息，那应该怎么办？What ~，这个问题不是很简单么，直接使用 console.log API 输出相应信息不就行了么：

console.log('Fetching heros...');this.heros = this.heroService.getHeros();

那问题又来了，如果多个组件都使用 HeroService 去获取英雄数据，那么是不是每个组件都得添加对应的语句。另外如果要修改输出的调试信息，那就得修改程序中多个地方。其实我们一般只需要在开发阶段，输出调试信息，因此上面的方案不合理，也不够灵活。