直播带货微信小程序_Angular 4依赖注入学习教程之Injectable装饰器(六)

  • 栏目:行业动态 时间:2021-01-12 10:46 分享新闻到:
<返回列表

Angular 4依赖注入学习教程之Injectable装饰器(六)       这篇文章主要给大家介绍了关于Angular 4依赖注入之Injectable装饰器的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来跟着小编一起学习学习吧。
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: `
 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 {
 // ...
}

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

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能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对凡科的支持。

分享新闻到:

更多阅读

直播带货微信小程序_Angular 4依赖注入学习

行业动态 2021-01-12
Angular 4依靠引入学习培训实例教程之Injectable装饰设计器(六) 本文关键给大伙儿详细介...
查看全文

广州凡科互联网科技股份有限公司招聘

行业动态 2021-01-11
招聘人数:28职位信息岗位职责1、负责Amazon帐号管理,产品上架,维护和优化listing页面,确保...
查看全文

广州凡科互联网科技股份有限公司招聘网

行业动态 2021-01-11
招聘人数:6职位信息职位信息1、根据公司提供的客户资源,与客户进行有效的沟通,了解客户...
查看全文
返回全部新闻


区域站点: 南丰县免费网站建设   南宫市自己建立网站   囊谦县凡客建站   南和县模板建站   南华县免费网站建设   南江县自己建立网站   南京市凡客建站   南靖县模板建站   南康市免费网站建设   南乐县自己建立网站   南陵县凡客建站   南宁市模板建站   南平市免费网站建设   南皮县自己建立网站   南市区凡客建站   南通市模板建站   南投县免费网站建设   南雄市自己建立网站   南溪县凡客建站   南阳市模板建站   南漳县免费网站建设   南召县自己建立网站   南郑县凡客建站   那坡县模板建站   那曲县免费网站建设   纳雍县自己建立网站   讷河市凡客建站   内黄县模板建站   内江市免费网站建设   内丘县自己建立网站   内乡县凡客建站   嫩江市模板建站   聂荣县免费网站建设   尼玛县自己建立网站   尼木县凡客建站   宁安市模板建站   宁波市免费网站建设   宁城县自己建立网站   宁德市凡客建站   宁都县模板建站   宁国市免费网站建设   宁海县自己建立网站   宁化县凡客建站   宁晋县模板建站   宁陵县免费网站建设   宁明县自己建立网站   宁南县凡客建站   宁强县模板建站   宁陕县免费网站建设   宁武县自己建立网站   宁乡市凡客建站   宁阳县模板建站   宁远县免费网站建设   农安县自己建立网站   磐安县凡客建站   盘锦市模板建站   盘山县免费网站建设   磐石市自己建立网站   盘州市凡客建站   蓬安县模板建站   澎湖县免费网站建设   蓬莱市自己建立网站   彭山县凡客建站   蓬溪县模板建站   彭阳县免费网站建设   彭泽县自己建立网站   彭州市凡客建站   偏关县模板建站   平安县免费网站建设   平昌县自己建立网站   平定县凡客建站   屏东县模板建站   平度市免费网站建设   平果县自己建立网站   平和县凡客建站   平湖市模板建站   平江县免费网站建设   平乐县自己建立网站   平凉市凡客建站   平利县模板建站   平罗县免费网站建设   平陆县自己建立网站   屏南县凡客建站   平泉市模板建站   屏山县免费网站建设   平顺县自己建立网站   平塘县凡客建站   平潭县模板建站   平武县免费网站建设   萍乡市自己建立网站   平乡县凡客建站   平阳县模板建站   平遥县免费网站建设   平阴县自己建立网站   平邑县凡客建站   平远县模板建站   平舆县免费网站建设   皮山县自己建立网站   普安县凡客建站   浦北县模板建站   浦城县免费网站建设   普洱市自己建立网站   普格县凡客建站   浦江县模板建站   普兰县免费网站建设   普宁市自己建立网站   莆田市凡客建站   迁安市模板建站   乾安县免费网站建设   潜江市自己建立网站   潜山市凡客建站  

友情链接: 她的后院 建网站平台 H5商城 自助建站 手机建站平台 凡科自助建站 手机版

Copyright © 2002-2020 凡客建站_模板建站_免费网站建设_自己建立网站_如何建立企业网站 版权所有 (网站地图) 备案号:粤ICP备10235580号