Angular 中的依賴注入

依賴項(xiàng)是指某個(gè)類執(zhí)行其功能所需的服務(wù)或?qū)ο?。依賴?xiàng)注入（DI）是一種設(shè)計(jì)模式，在這種設(shè)計(jì)模式中，類會(huì)從外部源請(qǐng)求依賴項(xiàng)而不是創(chuàng)建它們。

Angular 的 DI 框架會(huì)在實(shí)例化某個(gè)類時(shí)為其提供依賴?？梢允褂?nbsp;Angular DI 來(lái)提高應(yīng)用程序的靈活性和模塊化程度。

包含本指南中代碼片段的可工作示例，請(qǐng)參見(jiàn)現(xiàn)場(chǎng)演練 / 下載范例。

創(chuàng)建可注入服務(wù)

要想在 ?src/app/heroes? 目錄下生成一個(gè)新的 ?HeroService ?類，請(qǐng)使用下列 Angular CLI 命令。

ng generate service heroes/hero

下列命令會(huì)創(chuàng)建默認(rèn)的 ?HeroService?。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  constructor() { }
}

?@Injectable()? 裝飾器會(huì)指定 Angular 可以在 DI 體系中使用此類。元數(shù)據(jù) ?providedIn: 'root'? 表示 ?HeroService ?在整個(gè)應(yīng)用程序中都是可見(jiàn)的。

接下來(lái)，要獲取英雄的模擬數(shù)據(jù)，請(qǐng)?zhí)砑右粋€(gè) ?getHeroes()? 方法，該方法會(huì)從 ?mock.heroes.ts? 中返回英雄。

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';

@Injectable({
  // declares that this service should be created
  // by the root application injector.
  providedIn: 'root',
})
export class HeroService {
  getHeroes() { return HEROES; }
}

為了清晰和可維護(hù)性，建議你在單獨(dú)的文件中定義組件和服務(wù)。

如果你確實(shí)要將組件和服務(wù)合并在同一個(gè)文件中，則必須先定義服務(wù)，再定義組件，這一點(diǎn)很重要。如果在服務(wù)之前定義組件，Angular 將返回運(yùn)行時(shí)的空引用錯(cuò)誤。

注入服務(wù)

注入某些服務(wù)會(huì)使它們對(duì)組件可見(jiàn)。

要將依賴項(xiàng)注入組件的 ?constructor()? 中，請(qǐng)?zhí)峁┚哂写艘蕾図?xiàng)類型的構(gòu)造函數(shù)參數(shù)。下面的示例在 ?HeroListComponent ?的構(gòu)造函數(shù)中指定了 ?HeroService?。?heroService ?的類型是 ?HeroService?。

constructor(heroService: HeroService)

在其他服務(wù)中使用這些服務(wù)

當(dāng)某個(gè)服務(wù)依賴于另一個(gè)服務(wù)時(shí)，請(qǐng)遵循與注入組件相同的模式。在這里，?HeroService ?要依靠 ?Logger ?服務(wù)來(lái)報(bào)告其活動(dòng)。

首先，導(dǎo)入 ?Logger ?服務(wù)。接下來(lái)，通過(guò)在括號(hào)中指定 ?private logger: Logger?，來(lái)在 ?HeroService ?的 ?constructor()? 中注入 ?Logger ?服務(wù)。

當(dāng)創(chuàng)建一個(gè)其 ?constructor() ?帶有參數(shù)的類時(shí)，請(qǐng)指定其類型和關(guān)于這些參數(shù)的元數(shù)據(jù)，以便 Angular 可以注入正確的服務(wù)。

在這里，?constructor()? 指定了 ?Logger ?的類型，并把 ?Logger ?的實(shí)例存儲(chǔ)在名叫 ?logger ?的私有字段中。

下列代碼具有 ?Logger ?服務(wù)和兩個(gè)版本的 ?HeroService?。?HeroService ?的第一個(gè)版本不依賴于 ?Logger ?服務(wù)。修改后的第二個(gè)版本依賴于 ?Logger ?服務(wù)。

• src/app/heroes/hero.service (v2)

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
import { Logger } from '../logger.service';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor(private logger: Logger) {  }

  getHeroes() {
    this.logger.log('Getting heroes ...');
    return HEROES;
  }
}

• src/app/heroes/hero.service (v1)

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  getHeroes() { return HEROES; }
}

• src/app/logger.service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class Logger {
  logs: string[] = []; // capture logs for testing

  log(message: string) {
    this.logs.push(message);
    console.log(message);
  }
}

在這個(gè)例子中，?getHeroes()? 方法通過(guò)在獲取英雄時(shí)通過(guò) ?Logger ?來(lái)記錄一條消息。