學習目錄

本文主要給大家介紹的是關于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() 方法內。