这篇文章主要为大家展示了“Angular4中FactoryProvidervue”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angular4中FactoryProvidervue”这篇文章吧。
创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的沈河网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
开发环境及开发语言:
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: ` <ul> <li *ngFor="let hero of heros"> ID: {{hero.id}} - Name: {{hero.name}} </li> </ul> ` }) 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: ` <ul> <li *ngFor="let hero of heros"> ID: {{hero.id}} - Name: {{hero.name}} </li> </ul> ` }) 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<any> { 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”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
文章标题:Angular4中FactoryProvidervue
链接URL:https://www.cdcxhl.com/article8/pgdjop.html
成都网站建设公司_创新互联,为您提供外贸建站、品牌网站建设、服务器托管、软件开发、定制开发、ChatGPT
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联