Angular 依赖注入学习笔记之工厂函数的用法

网址：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 开发者来说，有两种操作：

提供数据到依赖注入树中

从依赖注入树中获取数据

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 的值吗？”

看个具体的例子。

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

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 代码里编写一些业务逻辑，执行一些数据结构变换的操作。

看个例子：

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