四川盐亭网站制作公司

Angular4中FactoryProvidervue-创新互联

这篇文章主要为大家展示了“Angular4中FactoryProvidervue”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Angular4中FactoryProvidervue”这篇文章吧。

成都创新互联公司主营台儿网站建设的网络公司,主营网站建设方案,成都App定制开发,台儿h5微信小程序开发搭建,台儿网站营销推广欢迎台儿等地区企业咨询

开发环境及开发语言：

  • 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: `
 
    
 
 ID: {{hero.id}} - Name: {{hero.name}}
 
 

 `
})
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: `
 
    
 
 ID: {{hero.id}} - Name: {{hero.name}}
 
 

 `
})
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 {
 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...

以上是“Angular4中FactoryProvidervue”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网页标题：Angular4中FactoryProvidervue-创新互联
文章URL：http://scyanting.com/article/cdoios.html

其他资讯