先了解 Angular 中的依賴注入

依賴項是指某個類執行其功能所需的服務或對象。依賴項注入（DI）是一種設計模式，在這種設計模式中，類會從外部源請求依賴項而不是讓類自己來創建它們。
Angular 的 DI 框架會在實例化某個類時為其提供依賴。你可以使用 Angular DI 來提高應用程序的靈活性和模塊化程度。

如何創建一個新的可以被注入的 service ？

命令行：ng generate service heroes/hero

自動生成的代碼，注意注解 @Injectable:

import { Injectable } from '@angular/core';@Injectable({providedIn: 'root', }) export class HeroService {constructor() { } }

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

配置提供者

通過配置提供者，你可以把服務提供給那些需要它們的應用部件。

依賴提供者會使用 DI 令牌來配置注入器，注入器會用它來提供這個依賴值的具體的、運行時版本。

如果你把服務類指定為提供者令牌，那么注入器的默認行為是用 new 來實例化那個類。

在下面這個例子中，Logger 類提供了 Logger 的實例。

providers: [Logger]

當使用提供者配置注入器時，會將該提供者與依賴項注入令牌（或叫 DI 令牌）關聯起來。注入器允許 Angular 創建任何內部依賴項的映射。DI 令牌會充當該映射的鍵名。

當你使用 HeroService 類的類型來定義構造函數參數時，Angular 會注入與這個 HeroService 類令牌相關聯的服務：

constructor(heroService: HeroService)

這里構造函數參數 heroService 實際上是一個令牌。

這個配置：

providers: [Logger]

實際上是下面寫法的簡寫：

[{ provide: Logger, useClass: Logger }]

• provide 屬性存有令牌，它作為一個 key，在定位依賴值和配置注入器時使用。
• 第二個屬性是一個提供者定義對象，它告訴注入器要如何創建依賴值。 提供者定義對象中的 key 可以是 useClass —— 就像這個例子中一樣。 也可以是 useExisting、useValue 或 useFactory。 每一個 key 都用于提供一種不同類型的依賴。

不同的類可以提供相同的服務。例如，以下代碼告訴注入器，當組件使用 Logger 令牌請求一個 logger 時，給它返回一個 BetterLogger.

這樣，當我們的應用程序，在 constructor 里使用下面代碼試圖注入 Logger 時：

constructor(logger: Logger)

運行時我們拿到的就是 BetterLogger 實例。

injection token 的使用方法

使用 TypeScript interface 定義一個 AppConfig 類型(略)

基于 AppConfig 類型創建一個常量：

export const HERO_DI_CONFIG: AppConfig = {apiEndpoint: 'api.heroes.com',title: 'Dependency Injection' };

要提供并注入配置對象，請在 @NgModule() 的 providers 數組中指定該對象。

providers: [ { provide: APP_CONFIG, useValue: HERO_DI_CONFIG } ],

上面代碼里 provide 屬性 APP_CONFIG 就是一個令牌，我們還需要使用代碼創建這個令牌。

import { InjectionToken } from '@angular/core';export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');

其中AppConfig 通過類型參數傳入令牌構造函數里。app.config 是令牌描述信息。

最后一步，在應用程序的構造函數里，用 @Inject，注入這個令牌。運行時，config 的值即為令牌關聯的常量：HERO_DI_CONFIG

constructor(@Inject(APP_CONFIG) config: AppConfig) {this.title = config.title; }

為什么我們不能直接把第一步用 interface 創建的 AppConfig 作為 provide 的值，而要大費周章，創建一個 InjectionToken 呢？

雖然 TypeScript 的 AppConfig 接口可以在類中提供類型支持，但它在依賴注入時卻沒有任何作用。在 TypeScript 中，接口是一項設計期工件，它沒有可供 DI 框架使用的運行時表示形式或令牌。
當轉譯器把 TypeScript 轉換成 JavaScript 時，接口就會消失，因為 JavaScript 沒有接口。
由于 Angular 在運行期沒有接口，所以該接口不能作為令牌，也不能注入它。

因此下列代碼不能工作：

// Can't use interface as provider token [{ provide: AppConfig, useValue: HERO_DI_CONFIG })]

看一個 SAP Spartacus 中 Injection Token 的使用例子：

export const PAGE_LAYOUT_HANDLER = new InjectionToken<PageLayoutHandler[]>('PageLayoutHandler' );

在 Cart.module.ts 里使用到了這個令牌：

最后在 PageLayoutService 里使用到了這個令牌指向的服務實例：PageLayoutHandler 組成的數組。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Spartacus 中的依赖注入 Dependency Injection 介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。