购物车
登陆 / 注册
微信扫码登陆

推荐手册

Angular 4 FactoryProvider的使用

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

Angular 4 +

Angular CLI

TypeScript

基础知识

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 去获取英雄数据,那么是不是每个组件都得添加对应的语句。另外如果要修改输出的调试信息,那就得修改程序中多个地方。其实我们一般只需要在开发阶段,输出调试信息,因此上面的方案不合理,也不够灵活。

其实我们可以借鉴之前引入 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: (?).

有的读者,眼睛一亮,可能是你在创建 LoggerService 服务时,忘记使用 @Injectable 装饰器了。哈哈,其实我是故意的,但我加上 @Injectable() 后,还是抛出了以下异常:

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: (?).

其实问题的答案也在 LoggerService 类的构造函数中,在创建 LoggerService 对象时,我们需要设置 enable 参数的值。那么如何解决呢? 当然可以使用我们的主角 FactoryProvider 。具体如下:

使用 FactoryProvider

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

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

LoggerService: Fetching heros...
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号