Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)

 更新时间:2017年06月04日 10:02:04   作者:semlinker  
这篇文章主要给大家介绍了关于Angular 4依赖注入之FactoryProvider配置依赖对象的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

学习目录

本文主要给大家介绍了关于Angular 4依赖注入之FactoryProvider配置依赖对象的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

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

基础知识

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能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • 在AngularJS中使用AJAX的方法

    在AngularJS中使用AJAX的方法

    这篇文章主要介绍了在AngularJS中使用AJAX的方法,示例非常简单,并不能完全体现出AJAX动态刷新的强大功能,需要的朋友可以参考下
    2015-06-06
  • 分享使用AngularJS创建应用的5个框架

    分享使用AngularJS创建应用的5个框架

    如果你计划使用AngularJS创建你的Web应用,那现在就开始吧。你不需要有任何的恐惧和担心,因为现在有很多的框架都可以很好地支持AngularJS
    2015-12-12
  • angularJS中router的使用指南

    angularJS中router的使用指南

    这篇文章主要介绍了angularJS中router的使用方法和示例分享,需要的朋友可以参考下
    2015-02-02
  • Angularjs中使用指令绑定点击事件的方法

    Angularjs中使用指令绑定点击事件的方法

    本篇文章主要介绍了Angularjs中使用指令绑定点击事件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • AngularJS中实现动画效果的方法

    AngularJS中实现动画效果的方法

    本文主要介绍AngularJS 动画,这里对动画的资料详细介绍并附有效果图和代码实例,有需要的小伙伴参考下
    2016-07-07
  • AngularJS实现的省市二级联动功能示例【可对选项实现增删】

    AngularJS实现的省市二级联动功能示例【可对选项实现增删】

    这篇文章主要介绍了AngularJS实现的省市二级联动功能,涉及事件监听、响应及页面元素动态操作相关技巧,此外还具备对选项进行增删的功能,需要的朋友可以参考下
    2017-10-10
  • AngularJS Bootstrap详细介绍及实例代码

    AngularJS Bootstrap详细介绍及实例代码

    本文主要介绍AngularJS Bootstrap,这两对AngularJS Bootstrap的基础知识做了详细讲解,并提供简单示例,有需要的小伙伴可以参考下
    2016-07-07
  • Angular.Js中过滤器filter与自定义过滤器filter实例详解

    Angular.Js中过滤器filter与自定义过滤器filter实例详解

    Angularjs过滤器是 angularjs非常棒的特性之一。有朝一日,你可能需要使用自定义过滤器,所以下面这篇文章主要给大家介绍了Angular.Js中过滤器filter与自定义过滤器filter的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • 利用angular.copy取消变量的双向绑定与解析

    利用angular.copy取消变量的双向绑定与解析

    众所周知AngularJS的双向绑定在表单应用中强大又方便,但是偶尔会遇到需要解除对象变量的双向绑定。Angular提供的angular.copy的方法可以实现解除双向绑定。所以这篇文章就来给大家详细的介绍下angular.copy,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-11-11
  • 简单说说angular.json文件的使用

    简单说说angular.json文件的使用

    这篇文章主要介绍了简单说说angular.json文件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10

最新评论