Angular InjectionToken APP_INITIALIZER 的实现方法介绍

什么是 InjectionToken？

在 Angular 中，我们经常需要注入依赖项。通常情况下，我们可以使用类作为依赖的标识符。但是，有时候我们需要注入一些非类对象，比如字符串、数字等。这时，我们就可以使用 InjectionToken。

InjectionToken 是一个用于标识依赖的特殊对象。它可以是一个字符串或者是一个对象，而不是一个类。通过使用 InjectionToken，我们可以在注入时明确指定依赖而不会产生冲突。

APP_INITIALIZER 的作用

Angular 中的 APP_INITIALIZER 是一个函数，它可以用于在应用程序初始化之前执行一些操作。这些操作可以包括获取一些配置信息、验证用户的身份等。

通常情况下，我们可以在应用程序的根模块中使用 APP_INITIALIZER，在应用程序初始化之前执行相关的初始化任务。

实现 InjectionToken 和 APP_INITIALIZER

首先，我们需要创建一个 InjectionToken，用于标识我们需要注入的依赖项。我们可以在一个单独的文件中定义 InjectionToken：

// dependencies.ts
import { InjectionToken } from '@angular/core';

export const MY_DEPENDENCY = new InjectionToken<string>('MyDependency');

接下来，我们需要创建一个工厂函数来提供依赖项。这个工厂函数将在 APP_INITIALIZER 函数中执行：

// dependencies.ts
export function myDependencyFactory(): string {
  return 'This is my dependency';
}

然后，我们需要在应用程序的根模块中配置 APP_INITIALIZER。我们可以在根模块的 providers 中使用 multi: true 属性来指定 APP_INITIALIZER，以执行初始化任务：

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';

import { AppComponent } from './app.component';

import { MY_DEPENDENCY, myDependencyFactory } from './dependencies';

export function initializeApp(): any {
  return (): Promise<any> => {
    // 执行初始化任务
    // 返回一个 Promise，以指示初始化任务是否完成
  };
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      multi: true,
      deps: [MY_DEPENDENCY],
    },
    {
      provide: MY_DEPENDENCY,
      useFactory: myDependencyFactory
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的代码中，我们使用 initializeApp 函数来定义 APP_INITIALIZER。在这个函数中，我们可以执行我们的初始化任务，并返回一个 Promise，以指示初始化任务是否完成。

最后，在需要注入依赖项的组件中，我们可以使用 @Inject() 装饰器和 InjectionToken，在构造函数中注入依赖项：

// app.component.ts
import { Component, Inject } from '@angular/core';
import { MY_DEPENDENCY } from './dependencies';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(MY_DEPENDENCY) private myDependency: string) { }
}

通过以上步骤，我们就可以使用 InjectionToken 和 APP_INITIALIZER 来实现依赖项的注入和初始化任务的执行了。

总结

Angular 的 InjectionToken 和 APP_INITIALIZER 是非常强大和灵活的工具，能够帮助我们更好地管理依赖项和执行初始化任务。通过合理地使用这些功能，我们可以在应用程序启动之前完成一些必要的准备工作，并在整个应用程序中与其它服务进行依赖注入。

希望这篇博客能够帮助你理解和使用 Angular 的 InjectionToken 和 APP_INITIALIZER。

本文来自极简博客，作者：蓝色幻想，转载请注明原文链接：Angular InjectionToken APP_INITIALIZER 的实现方法介绍