Angular 4 依赖注入教程之四 FactoryProvider的使用
目录
阅读须知本系列教程的开发环境及开发语言:
基础知识FactoryProvider 的作用FactoryProvider 用于告诉 Injector (注入器),通过调用 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介绍完基础知识,接下来我们马上进入正题。不知道大家是否还记得,之前我们创建过的 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('Fetching heros...'); this.heros = this.heroService.getHeros(); 那问题又来了,如果多个组件都使用 其实我们可以借鉴之前引入 创建 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: (?). 有的读者,眼睛一亮,可能是你在创建 ERROR Error: No provider for Boolean! 为什么会出现上面的异常信息呢?我们再看一下前面创建的 export class LoggerService { constructor(private enable: boolean) { } // ... } 在 Angular 中我们通过构造注入的方式注入依赖对象, export function isType(v: any): v is Type<any> { return typeof v === 'function'; } 接下来我们再来看一下最早抛出的异常: Uncaught Error: Can't resolve all parameters for LoggerService: (?). 其实问题的答应也在 使用 FactoryProvider@NgModule({ ...,providers: [ HeroService,{ provide: LoggerService,useFactory: () => { return new LoggerService(true); } } ],bootstrap: [AppComponent] }) export class AppModule { } 当更新完代码,然后再来一个华丽的保存操作,最后打开你的控制台,你将看到预期的输出信息: LoggerService: Fetching heros... 难道就这样结束了,关于 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |