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依赖注入之FactoryProvider配置依赖对象的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

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

  • Angular 4 +
  • Angular CLI
  • TypeScript

基础知识

Console 对象

Console 对象可以在任何全局对象中访问,如 Window,WorkerGlobalScope 以及通过属性工作台提供的特殊定义。在浏览器中我们可以通过 Window.console 访问 console 对象,使用示例如下:

console.log('My nickname is semlinker');

FactoryProvider 的作用

FactoryProvider 用于告诉 Injector (注入器),通过调用 useFactory 对应的函数,返回 Token 对应的依赖对象。

FactoryProvider 接口

export interface FactoryProvider {
 // 用于设置与依赖对象关联的Token值,Token值可能是Type、InjectionToken、
 // OpaqueToken的实例或字符串
 provide: any;
 // 设置用于创建对象的工厂函数
 useFactory: Function;
 // 依赖对象列表
 deps?: any[];
 // 用于标识是否multiple providers,若是multiple类型,则返回与Token关联的依赖
 // 对象列表
 multi?: boolean;
}

在 FactoryProvider的使用 这篇文章中,我们已经介绍了 FactoryProvider 的一些相关知识。接下来我们将介绍如何使用 FactoryProvider 配置依赖对象。

FactoryProvider

俗话说得好,温故而知新。我们先来回顾一下上一节创建的 LoggerService 服务:

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

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

LoggerService 的正确配置方式如下:

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

在继续介绍前,我们先来了解一下 Angular 的一大特色:

跨平台开发

学习如何基于 Angular 构建应用程序,并复用代码和技能来构建适用于所有平台的应用。比如:Web应用、移动Web应用、原生移动应用和原生桌面应用等。

没错,Angular 框架的一大特色就是跨平台开发。回到正题,不知道读者有没有察觉到,在 LoggerService 类中的 log() 方法内,我们是直接使用 console.log() 方法输出调试信息。虽然在大多数情况下,我们的应用都是运行在浏览器环境下,但 console.log() 存在兼容性问题 (了解详细信息 - Can I Use)。除此之外,假如日后我们的应用需要运行在其它平台下,就会出现问题。

为了解决上述问题,我们可以创建一个 ConsoleService 服务,且该服务需实现统一的 Console 接口。但本文的重点不在这里,因此我们先简单实现一个 ConsoleService 服务:

export class ConsoleService {
 log(message) {
 console.log(`ConsoleService: ${message}`);
 }
}

接下来我们就需要更新先前的 LoggerService 服务:

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

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

但当我们更新完 LoggerService ,成功保存后,你会看到以下异常信息:

app.module.ts (27,16): Supplied parameters do not match any signature of call target.

这说明提供的参数与调用目标的签名不匹配,这是因为在 AppModule 中,LoggerService 的配置方式是:

{
 provide: LoggerService, 
 useFactory: () => {
 return new LoggerService(true);
}

而此时 LoggerService 构造函数输入参数的个数为两个,因此会抛出上面的异常。那么我们应该怎么解决这个问题呢?这时我们就要利用 FactoryProvider 接口中定义的 deps 属性,来声明 LoggerService 所依赖的对象。

配置 deps 属性

{
 provide: LoggerService, 
 useFactory: (consoleService) => {
 return new LoggerService(true, consoleService);
 },
 deps: [ConsoleService]
}

更新 AppModule

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

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

LoggerService: Fetching heros...

我有话说

工厂函数是用来干嘛的?

在现实生活中,工厂是用来生产产品的,如鞋子工厂用来生产鞋子。而 FactoryProvider 接口中 useFactory 属性对应的工厂函数就是用来创建依赖对象。此外生产一双鞋子也需要对应的材料,如鞋底、鞋带等,而创建依赖对象也可能需要依赖其它对象,因此 FactoryProvider 接口中定义了 deps 属性用来声明依赖对象列表。

总结

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

Javascript 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
JavaScript基础之this详解
Jun 04 #Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 #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
You might like
PHP与SQL注入攻击[一]
2007/04/17 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
python中@contextmanager实例用法
2021/02/07 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
Python中如何定义一个函数
2016/09/06 面试题
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
个人务虚会发言材料
2014/10/20 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL