Angular 4依赖注入学习教程之Injectable装饰器(六)


Posted in Javascript onJune 04, 2017

学习目录

  • Angular 4 依赖注入教程之一 依赖注入简介
  • Angular 4 依赖注入教程之二 组件服务注入
  • Angular 4 依赖注入教程之三 ClassProvider的使用
  • Angular 4 依赖注入教程之四 FactoryProvider的使用
  • Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象
  • Angular 4 依赖注入教程之六 Injectable 装饰器
  • Angular 4 依赖注入教程之七 ValueProvider的使用
  • Angular 4 依赖注入教程之八 InjectToken的使用

本文主要给大家介绍的是关于Angular 4依赖注入之Injectable装饰器的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

本系列教程的开发环境及开发语言:

  • Angular 4 +
  • Angular CLI
  • TypeScript

基础知识

装饰器是什么

  • 它是一个表达式
  • 该表达式被执行后,返回一个函数
  • 函数的入参分别为 targe、name 和 descriptor
  • 执行该函数后,可能返回 descriptor 对象,用于配置 target 对象 

装饰器的分类

  • 类装饰器 (Class decorators)
  • 属性装饰器 (Property decorators)
  • 方法装饰器 (Method decorators)
  • 参数装饰器 (Parameter decorators)

TypeScript 类装饰器

类装饰器声明:

declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => 
 TFunction | void

类装饰器顾名思义,就是用来装饰类的。它接收一个参数:

target: TFunction - 被装饰的类

看完第一眼后,是不是感觉都不好了。没事,我们马上来个例子:

function Greeter(target: Function): void {
 target.prototype.greet = function (): void {
 console.log('Hello!');
 }
}

@Greeter
class Greeting {
 constructor() { // 内部实现 }
}

let myGreeting = new Greeting();
myGreeting.greet(); // console output: 'Hello!';

上面的例子中,我们定义了 Greeter 类装饰器,同时我们使用了 @Greeter 语法,来使用装饰器。

Injectable 类装饰器使用

import { Injectable } from '@angular/core';

@Injectable()
class HeroService {}

Injectable 装饰器

在介绍 Injectable 装饰器前,我们先来回顾一下 HeroComponent 组件:

@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();
 }
}

在 HeroComponent 组件的 ngOnInit 生命周期钩子中,我们在获取英雄信息前输出相应的调试信息。其实为了避免在每个应用的组件中都添加 log 语句,我们可以把 log 语句放在 getHeros() 方法内。

更新前 HeroService 服务

export class HeroService {
 heros: Array<{ id: number; name: string }> = [
 { id: 11, name: 'Mr. Nice' },
 { id: 12, name: 'Narco' },
 { id: 13, name: 'Bombasto' },
 { id: 14, name: 'Celeritas' },
 { id: 15, name: 'Magneta' },
 { 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;
 }
}

更新后 HeroService 服务

import { LoggerService } from './logger.service';

export class HeroService {
 constructor(private loggerService: LoggerService) { }

 heros: Array<{ id: number; name: string }> = [
 { id: 11, name: 'Mr. Nice' },
 { id: 12, name: 'Narco' },
 { id: 13, name: 'Bombasto' },
 { id: 14, name: 'Celeritas' },
 { id: 15, name: 'Magneta' }
 ];

 getHeros() {
 this.loggerService.log('Fetching heros...');
 return this.heros;
 }
}

当以上代码运行后会抛出以下异常信息:

Uncaught Error: Can't resolve all parameters for HeroService: (?).

上面异常信息说明无法解析 HeroService 的所有参数,而 HeroService 服务的构造函数如下:

export class HeroService {
 constructor(private loggerService: LoggerService) { }
}

该构造函数的输入参数是 loggerService 且它的类型是 LoggerService 。在继续深入研究之前,我们来看一下 HeroService 最终生成的 ES5 代码:

var HeroService = (function() {
 function HeroService(loggerService) {
 this.loggerService = loggerService;
 this.heros = [{...}, ...];
 }
 HeroService.prototype.getHeros = function() {
 this.loggerService.log('Fetching heros...');
 return this.heros;
 };
 return HeroService;
}());

我们发现生成的 ES5 代码中,HeroService 构造函数中是没有包含任何类型信息的,因此 Angular Injector (注入器) 就无法正常工作了。那么要怎么保存 HeroService 类构造函数中参数的类型信息呢?相信你已经想到了答案 — 当然是使用 Injectable 装饰器咯。接下来我们更新一下 HeroService:

import { Injectable } from '@angular/core';
import { LoggerService } from './logger.service';

@Injectable()
export class HeroService {
 // ...
}

更新完上面的代码,成功保存后,在 http://localhost:4200/ 页面,你将看到熟悉的 "身影":

ID: 11 - Name: Mr. Nice
ID: 12 - Name: Narco
ID: 13 - Name: Bombasto
ID: 14 - Name: Celeritas
ID: 15 - Name: Magneta

现在我们再来看一下 HeroService 类生成的 ES5 代码:

var HeroService = (function() {
 function HeroService(loggerService) {
 this.loggerService = loggerService;
 this.heros = [{...}, ...];
 }
 HeroService.prototype.getHeros = function() {
 this.loggerService.log('Fetching heros...');
 return this.heros;
 };
 return HeroService;
}());
HeroService = __decorate([__webpack_require__.i(
 __WEBPACK_IMPORTED_MODULE_0__angular_core__["c"/* Injectable */
])(), __metadata("design:paramtypes", ...)], HeroService);

__decorate 函数

var __decorate = (this && this.__decorate) || function(decorators, target, key, desc) {...};

__metadata 函数

var __metadata = (this && this.__metadata) || function(k, v) {
 if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
 return Reflect.metadata(k, v);
};

我们发现相比未使用 Injectable 装饰器,HeroService 服务生成的 ES5 代码多出了 HeroService = __decorate(...) 这些代码。简单起见,我稍微介绍一下,通过 Injectable 装饰器,在编译时会把 HeroService 服务构造函数中参数的类型信息,通过 Reflect API 保存在 window['__core-js_shared__'] 对象的内部属性中。当 Injector 创建 HeroService 对象时,会通过 Reflect API 去读取之前已保存的构造函数中参数的类型信息,进而正确的完成实例化操作。

我有话说

@Injectable() 是必须的么?

如果所创建的服务不依赖于其他对象,是可以不用使用 Injectable 类装饰器。但当该服务需要在构造函数中注入依赖对象,就需要使用 Injectable 装饰器。不过比较推荐的做法不管是否有依赖对象,在创建服务时都使用 Injectable 类装饰器。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用Angular 4能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
Node.js模块加载详解
Aug 16 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 #Javascript
JavaScript基础之this详解
Jun 04 #Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 #Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 #Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 #Javascript
JavaScript箭头(arrow)函数详解
Jun 04 #Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 #Javascript
You might like
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
javascript基本语法分析说明
2008/06/15 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现FTP服务器服务的方法
2017/04/11 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
设计师个人求职信范文
2014/02/02 职场文书
幼儿园秋游感想
2014/03/12 职场文书
青年文明号创建承诺
2014/03/31 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
检讨书范文300字
2015/01/28 职场文书
秦兵马俑导游词
2015/02/02 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫