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 相关文章推荐
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Javascript的promise,async和await的区别详解
Mar 24 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
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php 魔术方法详解
2014/11/11 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
wxPython多个窗口的基本结构
2019/11/19 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python实现在线翻译功能
2020/03/03 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
JSF的标签库有哪些
2012/04/27 面试题
初中学校军训方案
2014/05/09 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
销售工作决心书
2015/02/04 职场文书
英文辞职信范文
2015/05/13 职场文书
银行服务理念口号
2015/12/25 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
opencv检测动态物体的实现
2021/07/21 Python