網址：https://angular.institute/di

> We can transfer any data through our apps, transform it and replace it.

我們能傳遞任何資料到我們的應用裡，改變其形態，並且替換。

> Another case: document and fetch can work in your browser correctly. But one day you need to build your app in SSR or precompile with nodejs. Global entities might be missing or be different in that environment.

document 和 fetch 能在瀏覽器環境下執行。但是如果在 SSR 下 build 應用，或者用 nodejs precompile，那麼這些物件在新的環境下不再可用。

> Dependency Injection mechanism manages dependencies in your application. For you as an Angular developer, it is a straightforward instrument. There are two operations: you can provide something into your DI tree or take something from it.

依賴注入機制管理應用的依賴。對於 Angular 開發者來說，有兩種操作：

1. 提供資料到依賴注入樹中
2. 從依賴注入樹中獲取資料

> The magic is the order in which you provide and take your dependencies.
> Angular creates a class instance when you ask for this the first time.

當我們試圖在 DI 樹裡第一次獲取例項時，Angular 負責例項化。

> Providing value is normally used with InjectionToken. This object is like a key for DI mechanism.

我們也可以用依賴注入提供常量，通常藉助 InjectionToken. 這個令牌類似依賴注入機制中的 key.

> You say "I want to get this data with this key" and ask DI in a component "Do you have something for this key?"

我們使用 InjectionToken 作為 key，詢問 Angular 依賴注入機制，“你維護的資源裡，有針對這個 key 的值嗎？”

看個具體的例子。

```typescript
export const API_URL = new InjectionToken<string>('The URL of API');
```

在 api-url.token.ts 裡，我們從 @angular/core 裡匯入了標準的 InjectionToken 構造器，其型別為 string，描述資訊為：The URL of API.
![](https://img-blog.csdnimg.cn/img_convert/7e8c38754d467888d1f4b895aeee221f.png)

在 app.module.ts 裡，匯入這個 API_URL token，然後在 module 的 NgModule 註解裡，使用 useValue 提供 token key 代表的具體值：

![](https://img-blog.csdnimg.cn/img_convert/b50a5db8d14e9e3722c59447618ebe5b.png)

如何使用這個 token 呢？參考下圖程式碼：

![](https://img-blog.csdnimg.cn/img_convert/731c127435ef0aa128f62cb455043041.png)

```typescript 
export class AppComponent  {
  constructor(@Inject(API_URL) readonly apiUrl: string) {
    /**
     * Here we asked for something with a key API_URL.
     * There is our string in DI and we get it
     */
    console.log(apiUrl);
  }
}
```

語義就是，在 app Component 裡，使用 @Inject 註解，向 DI 樹裡查詢，是否存在 key 為 API_URL 的注入值。

* We can replace token value at any level of DI tree without any changes in a component - 我們可以在 DI 樹上的任意層次結構裡，替換 token 的值，而不需要修改 Component

* We can mock a token value providing suitable data in tests - 在測試程式碼裡，我們可以 mock 一個 token 值

* The component class is fully isolated and can be used without any context

# Providing a factory

這是 Angular 依賴注入的高階用法之一。

> You can provide some value combining and transforming data from other tokens.

我們可以在 factory 程式碼裡編寫一些業務邏輯，執行一些資料結構變換的操作。

看個例子：

![](https://img-blog.csdnimg.cn/img_convert/601ec8502530f580c6bc7771efd81e7f.png)

定義一個函式：

```typescript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { PRESSED_KEY } from "./tokens/pressed-key";
import { Observable, fromEvent } from "rxjs";
import { map } from "rxjs/operators";
import { DOCUMENT } from "@angular/common";

/**
 * It is a token value factory.
 *
 * The factory is called when app.component.ts asks for
 * the token PRESSED_KEY the first time
 */
function pressedKeyFactory(documentRef: Document): Observable<string> {
  return fromEvent(documentRef.body, "keydown").pipe(
    map((event: KeyboardEvent) => event.key)
  );
}
```

構造一個 Observable 物件，當鍵盤被按下時，從 KeyboardEvent 裡解析出具體哪一個鍵被按下，然後將 key 值透過 Observable 物件返回。

這個函式被當成一個工廠函式，本身接收型別為 Document 的引數，這個引數就是其依賴。

我們透過下列的語法，將名為 PRESSED_KEY 的令牌，和該工廠函式繫結在一起。

![](https://img-blog.csdnimg.cn/img_convert/4dcfcc16eeee0aed43513644419c7398.png)

```typescript
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: PRESSED_KEY,
      /**
       * Here you can provide any token and its value will be injected
       * as a factory function argument
       */
      deps: [DOCUMENT],
      useFactory: pressedKeyFactory
    }
  ]
})
```
該 token 的消費方式：

![](https://img-blog.csdnimg.cn/img_convert/167047d00ce72135f95e21dc5f07cb31.png)</string></string>

Angular 依賴注入學習筆記之工廠函式的用法

相關文章