Angular 4依赖注入学习教程之ClassProvider的使用(三)

网友投稿 254 2023-05-10


Angular 4依赖注入学习教程之ClassProvider的使用(三)

学习目录

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

Providhttp://er 的分类

在 Angular 中 Provider 主要分为:

TypeProvider

ClassProvider

ValueProvider

ExistingProvider

FactoryProvider

ClassProvider

ClassProvider 接口定义

export interface ClassProvider {

// 用于设置与依赖对象关联的Token值,Token值可能是Type、InjectionToken、

// OpaqueToken的实例或字符串

provide: any;

useClass: Type;

// 用于标识是否multiple providers,若是multiple类型,则返回与Token关联的依赖

// 对象列表

multi?: boolean;

}

看完上面的接口定义,相信一些读者会觉得陌生。在本系列教程第二小节中,我们用到了 TypeProvider。

不信你往下看:

@NgModule({

...

providers: [HeroService], // 方式一

bootstrap: [AppComponent]

})

export class AppModule { }

// TypeProvider接口

export interface TypeProvider extends Type {}

那跟 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 的目的,也是为了说明依赖注入的好处,即易于进KtGDM行本地单元测试。此外假设没有利用 Angular 依赖注入的特性,我们需要修改应用中每个应用到 HeroService 的地方。

我有话说

ClassProvider 接口中的 Type 类型是什么?

export interface Type extends Function { new (...args: any[]): T; }

export function isType(v: any): v is Type {

return typeof v === 'function';

}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
下一篇:Java如何获取当前进程ID以及所有Java进程的进程ID
相关文章

 发表评论

暂时没有评论,来抢沙发吧~