源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-08-04 17:37 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Angular 4依赖注入学习教程之Injectable装饰器(六)
[b]学习目录[/b] [list] [*][url=http://www.1sucai.cn/article/115317.htm]Angular 4 依赖注入教程之一 依赖注入简介[/url][/*] [*][url=http://www.1sucai.cn/article/115319.htm]Angular 4 依赖注入教程之二 组件服务注入[/url][/*] [*][url=http://www.1sucai.cn/article/115320.htm]Angular 4 依赖注入教程之三 ClassProvider的使用[/url][/*] [*][url=http://www.1sucai.cn/article/115322.htm]Angular 4 依赖注入教程之四 FactoryProvider的使用[/url][/*] [*][url=http://www.1sucai.cn/article/115326.htm]Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象[/url][/*] [*][url=http://www.1sucai.cn/article/115329.htm]Angular 4 依赖注入教程之六 Injectable 装饰器[/url][/*] [*][url=http://www.1sucai.cn/article/115333.htm]Angular 4 依赖注入教程之七 ValueProvider的使用[/url][/*] [*][url=http://www.1sucai.cn/article/115334.htm]Angular 4 依赖注入教程之八 InjectToken的使用[/url][/*] [/list] 本文主要给大家介绍的是关于Angular 4依赖注入之Injectable装饰器的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: [b]本系列教程的开发环境及开发语言:[/b] [list] [*][url=https://angular.io/]Angular 4 +[/url][/*] [*][url=https://github.com/angular/angular-cli]Angular CLI[/url][/*] [*][url=https://www.typescriptlang.org/index.html]TypeScript[/url][/*] [/list] [b]基础知识[/b] [b]装饰器是什么[/b] [list] [*]它是一个表达式[/*] [*]该表达式被执行后,返回一个函数[/*] [*]函数的入参分别为 targe、name 和 descriptor[/*] [*]执行该函数后,可能返回 descriptor 对象,用于配置 target 对象 [/*] [/list] [b]装饰器的分类[/b] [list] [*]类装饰器 (Class decorators)[/*] [*]属性装饰器 (Property decorators)[/*] [*]方法装饰器 (Method decorators)[/*] [*]参数装饰器 (Parameter decorators) [/*] [/list] [b]TypeScript 类装饰器[/b] 类装饰器声明:
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 语法,来使用装饰器。 [b]Injectable 类装饰器使用[/b]
import { Injectable } from '@angular/core';

@Injectable()
class HeroService {}
[b]Injectable 装饰器[/b] 在介绍 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() 方法内。 [b]更新前 HeroService 服务[/b]
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;
 }
}
[b]更新后 HeroService 服务[/b]
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);
[b]__decorate 函数[/b]
var __decorate = (this && this.__decorate) || function(decorators, target, key, desc) {...};
[b]__metadata 函数[/b]
var __metadata = (this && this.__metadata) || function(k, v) {
 if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
 return Reflect.metadata(k, v);
};
我们发现相比未使用 Injectable 装饰器,HeroService 服务生成的 ES5 代码多出了 [code]HeroService = __decorate(...)[/code] 这些代码。简单起见,我稍微介绍一下,通过 Injectable 装饰器,在编译时会把 HeroService 服务构造函数中参数的类型信息,通过 Reflect API 保存在 [code]window['__core-js_shared__'] [/code]对象的内部属性中。当 Injector 创建 HeroService 对象时,会通过 Reflect API 去读取之前已保存的构造函数中参数的类型信息,进而正确的完成实例化操作。 [b]我有话说[/b] [b]@Injectable() 是必须的么?[/b] 如果所创建的服务不依赖于其他对象,是可以不用使用 Injectable 类装饰器。但当该服务需要在构造函数中注入依赖对象,就需要使用 Injectable 装饰器。不过比较推荐的做法不管是否有依赖对象,在创建服务时都使用 Injectable 类装饰器。 [b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用Angular 4能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程素材网的支持。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部