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

学习目录

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

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

基础知识

装饰器是什么

装饰器的分类

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!'); }}@Greeterclass 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() 方法内。