Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
学习目录
- 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配置依赖对象的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:
本系列教程的开发环境及开发语言:
基础知识
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能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
推荐阅读
-
Angular 4依赖注入学习教程之简介(一)
-
Angular 4依赖注入学习教程之ClassProvider的使用(三)
-
Angular 4依赖注入学习教程之ValueProvider的使用(七)
-
Angular 4依赖注入学习教程之InjectToken的使用(八)
-
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
-
Angular 4依赖注入学习教程之组件服务注入(二)
-
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
-
Angular 4依赖注入学习教程之Injectable装饰器(六)
-
Angular 4依赖注入学习教程之简介(一)
-
Angular 4依赖注入学习教程之组件服务注入(二)