Angular 依賴注入

Angular 中的依賴注入

依賴項是指某個類執(zhí)行其功能所需的服務或對象。依賴項注入（DI）是一種設計模式，在這種設計模式中，類會從外部源請求依賴項而不是創(chuàng)建它們。

Angular 的 DI 框架會在實例化某個類時為其提供依賴?？梢允褂?nbsp;Angular DI 來提高應用程序的靈活性和模塊化程度。

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

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

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

ng generate service heroes/hero

下列命令會創(chuàng)建默認的 ?HeroService?。

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

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

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

接下來，要獲取英雄的模擬數(shù)據(jù)，請?zhí)砑右粋€ ?getHeroes()? 方法，該方法會從 ?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; }
}

為了清晰和可維護性，建議你在單獨的文件中定義組件和服務。

如果你確實要將組件和服務合并在同一個文件中，則必須先定義服務，再定義組件，這一點很重要。如果在服務之前定義組件，Angular 將返回運行時的空引用錯誤。

注入服務

注入某些服務會使它們對組件可見。

要將依賴項注入組件的 ?constructor()? 中，請?zhí)峁┚哂写艘蕾図楊愋偷臉嬙旌瘮?shù)參數(shù)。下面的示例在 ?HeroListComponent ?的構造函數(shù)中指定了 ?HeroService?。?heroService ?的類型是 ?HeroService?。

constructor(heroService: HeroService)

在其他服務中使用這些服務

當某個服務依賴于另一個服務時，請遵循與注入組件相同的模式。在這里，?HeroService ?要依靠 ?Logger ?服務來報告其活動。

首先，導入 ?Logger ?服務。接下來，通過在括號中指定 ?private logger: Logger?，來在 ?HeroService ?的 ?constructor()? 中注入 ?Logger ?服務。

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

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

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

• 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);
  }
}

在這個例子中，?getHeroes()? 方法通過在獲取英雄時通過 ?Logger ?來記錄一條消息。