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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
vue.js项目打包上线的图文教程
Nov 16 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 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中目录,文件操作详谈
2007/03/19 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
Nginx实现反向代理
2017/09/20 Servers
JQuery select标签操作代码段
2010/05/16 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python机器学习之决策树分类详解
2017/12/20 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
任意存:BOXFUL
2018/05/21 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
行政答辩状范文
2015/05/21 职场文书
全陪导游词开场白
2015/05/29 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
七年级作文之雪景
2019/11/18 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Github 使用python对copilot做些简单使用测试
2022/04/14 Python