Angular 4依赖注入学习教程之ClassProvider的使用(三)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Angular 4依赖注入学习教程之ClassProvider的使用(三),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3397字,纯文字阅读大概需要5分钟。
内容图文
学习目录
- Angular 4 依赖注入教程之一 依赖注入简介
- Angular 4 依赖注入教程之二 组件服务注入
- Angular 4 依赖注入教程之三 ClassProvider的使用
- Angular 4 依赖注入教程之四 FactoryProvider的使用
- Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象
- Angular 4 依赖注入教程之六 Injectable 装饰器
- Angular 4 依赖注入教程之七 ValueProvider的使用
- Angular 4 依赖注入教程之八 InjectToken的使用
前言
本文属于Angular 4依赖注入学习系列文章的第三篇,主要给大家介绍了Angular 4依赖注入之ClassProvider使用的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:
本系列教程的开发环境及开发语言:
- Angular 4 +
- Angular CLI
- TypeScript
基础知识
Provider 的作用
在 Angular 中我们通过 Provider 来描述与 Token 相关联的依赖对象的创建方式。在 Angular 中依赖对象的创建方式分为以下四种:
- useClass
- useValue
- useExisting
- useFactory
(图一:注入器、Provider与依赖对象关系)
Provider 的分类
在 Angular 中 Provider 主要分为:
- TypeProvider
- ClassProvider
- ValueProvider
- ExistingProvider
- FactoryProvider
ClassProvider
ClassProvider 接口定义
export interface ClassProvider { // 用于设置与依赖对象关联的Token值,Token值可能是Type、InjectionToken、 // OpaqueToken的实例或字符串 provide: any; useClass: Type<any>; // 用于标识是否multiple providers,若是multiple类型,则返回与Token关联的依赖 // 对象列表 multi?: boolean; }
看完上面的接口定义,相信一些读者会觉得陌生。在本系列教程第二小节中,我们用到了 TypeProvider。
不信你往下看:
@NgModule({ ... providers: [HeroService], // 方式一 bootstrap: [AppComponent] }) export class AppModule { } // TypeProvider接口 export interface TypeProvider extends Type<any> {}
那跟 ClassProvider 有什么关系?先不急,请你继续往下看:
@NgModule({ ... providers: [{ provide: HeroService, useClass: HeroService // 方式二 }], bootstrap: [AppComponent] }) export class AppModule { }
是不是终于看到了 useClass 。其实上面两种方式是等价的,方式一更加简洁,方式二是采用标准的语法哈。那么问题来了,什么时候要使用 useClass 语法?回答这个问题前,我们先看个需求。
假设由于业务需要,先前我们定义的 HeroService 的数据,需要从服务器获取,而不是使用静态数据。项目采用前后端分离的开发方式进行开发,此外在项目开发前已经协商好数据格式,也给出了对应的模拟数据(测试数据)。
那么除了修改原有的 HeroService 服务外,有没有其它方式可以方便地验证一下模拟数据,同时保持较小的改动量哈。其实我们可以创建一个新的数据服务,如 MockHeroService ,具体实现如下:
创建 MockHeroService 服务
export class MockHeroService { heros: Array<{ id: number; name: string }> = [ { id: 16, name: 'RubberMan' }, { id: 17, name: 'Dynama' }, { id: 18, name: 'Dr IQ' }, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' } ]; getHeros() { return this.heros; } }
使用 MockHeroService 服务
@NgModule({ ... providers: [{ provide: HeroService, useClass: MockHeroService }], bootstrap: [AppComponent] }) export class AppModule { }
更新完相关的代码,正常情况下,在 http://localhost:4200/ 页面,你将看到以下的内容:
ID: 16 - Name: RubberMan ID: 17 - Name: Dynama ID: 18 - Name: Dr IQ ID: 19 - Name: Magma ID: 20 - Name: Tornado
其实服务命名为 MockHeroService 的目的,也是为了说明依赖注入的好处,即易于进行本地单元测试。此外假设没有利用 Angular 依赖注入的特性,我们需要修改应用中每个应用到 HeroService 的地方。
我有话说
ClassProvider 接口中的 Type 类型是什么?
export interface Type<T> extends Function { new (...args: any[]): T; } export function isType(v: any): v is Type<any> { return typeof v === 'function'; }
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
内容总结
以上是互联网集市为您收集整理的Angular 4依赖注入学习教程之ClassProvider的使用(三)全部内容,希望文章能够帮你解决Angular 4依赖注入学习教程之ClassProvider的使用(三)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。