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

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

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

export interface FactoryProvider {
 // 用于设置与依赖对象关联的Token值，Token值可能是Type、InjectionToken、
 // OpaqueToken的实例或字符串
 provide: any;
 // 设置用于创建对象的工厂函数
 useFactory: Function;
 // 依赖对象列表
 deps"htmlcode">

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 去获取英雄数据，那么是不是每个组件都得添加对应的语句。另外如果要修改输出的调试信息，那就得修改程序中多个地方。其实我们一般只需要在开发阶段，输出调试信息，因此上面的方案不合理，也不够灵活。
其实我们可以借鉴之前引入 HeroService 服务的思路，创建一个 LoggerService 来解决上面提到的问题。
创建 LoggerService 服务




export class LoggerService {
 constructor(private enable: boolean) { }

 log(message: string) {
 if(this.enable) {
  console.log(`LoggerService: ${message}`);
 }
 }
}


配置 LoggerService 服务




@NgModule({
 ...
 providers: [
 HeroService,
 LoggerService
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }


使用 LoggerService 服务




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();
 }
}


以上代码运行后会抛出以下异常信息：


Uncaught Error: Can't resolve all parameters for LoggerService: ("htmlcode">

ERROR Error: No provider for Boolean!


为什么会出现上面的异常信息呢？我们再看一下前面创建的 LoggerService 服务：


export class LoggerService {
 constructor(private enable: boolean) { }
 // ...
}


在 Angular 中我们通过构造注入的方式注入依赖对象， private enable: boolean 这种方式表示我们要注入 Type 类型的对象。然后 boolean 是表示基本数据类型，并不是所需的 Type 类型：


export function isType(v: any): v is Type<any> {
 return typeof v === 'function';
}


接下来我们再来看一下最早抛出的异常：


Uncaught Error: Can't resolve all parameters for LoggerService: ("htmlcode">

@NgModule({
 ...,
 providers: [
 HeroService,
 {
 provide: LoggerService, 
 useFactory: () => {
 return new LoggerService(true);
 }
 }
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }


当更新完代码，然后再来一个华丽的保存操作，最后打开你的控制台，你将看到预期的输出信息：


LoggerService: Fetching heros...


难道就这样结束了，关于 FactoryProvider 的相关内容先告一段落，下一篇我们将介绍如何使用 FactoryProvider 配置依赖对象。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者使用Angular 4能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。



            
            上一篇：JavaScript基础之this详解

            下一篇：Angular 4依赖注入学习教程之ClassProvider的使用（三）