Angular 4依赖注入学习教程之FactoryProvider配置依赖对象（五）
学习目录
- Angular4依赖注入教程之一依赖注入简介
- Angular4依赖注入教程之二组件服务注入
- Angular4依赖注入教程之三ClassProvider的使用
- Angular4依赖注入教程之四FactoryProvider的使用
- Angular4依赖注入教程之五FactoryProvider配置依赖对象
- Angular4依赖注入教程之六Injectable装饰器
- Angular4依赖注入教程之七ValueProvider的使用
- Angular4依赖注入教程之八InjectToken的使用
本文主要给大家介绍了关于Angular4依赖注入之FactoryProvider配置依赖对象的相关内容，分享出来供大家参考学习，下面来看看详细的介绍：
本系列教程的开发环境及开发语言：
- Angular4+
- AngularCLI
- TypeScript
基础知识
Console对象
Console对象可以在任何全局对象中访问，如Window，WorkerGlobalScope以及通过属性工作台提供的特殊定义。在浏览器中我们可以通过Window.console访问console对象，使用示例如下：
console.log('Mynicknameissemlinker');
FactoryProvider的作用
FactoryProvider用于告诉Injector(注入器)，通过调用useFactory对应的函数，返回Token对应的依赖对象。
FactoryProvider接口
exportinterfaceFactoryProvider{
//用于设置与依赖对象关联的Token值，Token值可能是Type、InjectionToken、
//OpaqueToken的实例或字符串
provide:any;
//设置用于创建对象的工厂函数
useFactory:Function;
//依赖对象列表
deps?:any[];
//用于标识是否multipleproviders，若是multiple类型，则返回与Token关联的依赖
//对象列表
multi?:boolean;
}
在FactoryProvider的使用这篇文章中，我们已经介绍了FactoryProvider的一些相关知识。接下来我们将介绍如何使用FactoryProvider配置依赖对象。
FactoryProvider
俗话说得好，温故而知新。我们先来回顾一下上一节创建的LoggerService服务：
exportclassLoggerService{
constructor(privateenable:boolean){}
log(message:string){
if(this.enable){
console.log(`LoggerService:${message}`);
}
}
}
LoggerService的正确配置方式如下：
@NgModule({
...,
providers:[
HeroService,
{
provide:LoggerService,
useFactory:()=>{
returnnewLoggerService(true);
}
}
],
bootstrap:[AppComponent]
})
exportclassAppModule{}
在继续介绍前，我们先来了解一下Angular的一大特色：
跨平台开发
学习如何基于Angular构建应用程序，并复用代码和技能来构建适用于所有平台的应用。比如：Web应用、移动Web应用、原生移动应用和原生桌面应用等。
没错，Angular框架的一大特色就是跨平台开发。回到正题，不知道读者有没有察觉到，在LoggerService类中的log()方法内，我们是直接使用console.log()方法输出调试信息。虽然在大多数情况下，我们的应用都是运行在浏览器环境下，但console.log()存在兼容性问题(了解详细信息-CanIUse)。除此之外，假如日后我们的应用需要运行在其它平台下，就会出现问题。
为了解决上述问题，我们可以创建一个ConsoleService服务，且该服务需实现统一的Console接口。但本文的重点不在这里，因此我们先简单实现一个ConsoleService服务：
exportclassConsoleService{
log(message){
console.log(`ConsoleService:${message}`);
}
}
接下来我们就需要更新先前的LoggerService服务：
exportclassLoggerService{
constructor(privateenable:boolean,
consoleService:ConsoleService){}
log(message:string){
if(this.enable){
console.log(`LoggerService:${message}`);
}
}
}
但当我们更新完LoggerService，成功保存后，你会看到以下异常信息：
app.module.ts(27,16):Suppliedparametersdonotmatchanysignatureofcalltarget.
这说明提供的参数与调用目标的签名不匹配，这是因为在AppModule中，LoggerService的配置方式是：
{
provide:LoggerService,
useFactory:()=>{
returnnewLoggerService(true);
}
而此时LoggerService构造函数输入参数的个数为两个，因此会抛出上面的异常。那么我们应该怎么解决这个问题呢？这时我们就要利用FactoryProvider接口中定义的deps属性，来声明LoggerService所依赖的对象。
配置deps属性
{
provide:LoggerService,
useFactory:(consoleService)=>{
returnnewLoggerService(true,consoleService);
},
deps:[ConsoleService]
}
更新AppModule
@NgModule({
...,
providers:[
HeroService,
ConsoleService,
{
provide:LoggerService,
useFactory:(consoleService)=>{
returnnewLoggerService(true,consoleService);
},
deps:[ConsoleService]
}
],
bootstrap:[AppComponent]
})
exportclassAppModule{}
当更新完代码，然后再来一个华丽的保存操作，最后打开你的控制台，你又看到预期的输出信息：
LoggerService:Fetchingheros...
我有话说
工厂函数是用来干嘛的？
在现实生活中，工厂是用来生产产品的，如鞋子工厂用来生产鞋子。而FactoryProvider接口中useFactory属性对应的工厂函数就是用来创建依赖对象。此外生产一双鞋子也需要对应的材料，如鞋底、鞋带等，而创建依赖对象也可能需要依赖其它对象，因此FactoryProvider接口中定义了deps属性用来声明依赖对象列表。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者使用Angular4能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。