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


Posted in Javascript onJune 04, 2017

学习目录

  • Angular 4 依赖注入教程之一 依赖注入简介
  • Angular 4 依赖注入教程之二 组件服务注入
  • Angular 4 依赖注入教程之三 ClassProvider的使用
  • Angular 4 依赖注入教程之四 FactoryProvider的使用
  • Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象
  • Angular 4 依赖注入教程之六 Injectable 装饰器
  • Angular 4 依赖注入教程之七 ValueProvider的使用
  • Angular 4 依赖注入教程之八 InjectToken的使用

前言

本文属于Angular 4 依赖注入学习系列的第四篇,主要介绍了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...

难道就这样结束了,关于 FactoryProvider 的相关内容先告一段落,下一篇我们将介绍如何使用 FactoryProvider 配置依赖对象。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用Angular 4能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Knockoutjs快速入门(经典)
Dec 24 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
微信小程序入门教程
Nov 18 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 #Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 #Javascript
JavaScript箭头(arrow)函数详解
Jun 04 #Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 #Javascript
angularJs中datatable实现代码
Jun 03 #Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 #Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 #Javascript
You might like
PHP4中session登录页面的应用
2008/07/25 PHP
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
php格式化金额函数分享
2015/02/02 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
Python实现的概率分布运算操作示例
2017/08/14 Python
python装饰器深入学习
2018/04/06 Python
Python延时操作实现方法示例
2018/08/14 Python
pygame实现简易飞机大战
2018/09/11 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
Python调用C语言程序方法解析
2020/07/07 Python
策划主管的工作职责
2013/11/24 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
社区先进事迹材料
2014/05/19 职场文书
全国文明单位申报材料
2014/05/31 职场文书
企业读书活动总结
2014/06/30 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android