关于angular:Angular-应用开发中-Injection-Token-的使用方法介绍

120次阅读

共计 4478 个字符,预计需要花费 12 分钟才能阅读完成。

Angular 是一个风行的前端 JavaScript 框架,它提供了一种弱小的形式来构建单页应用程序(SPA)。在 Angular 中,依赖注入(Dependency Injection,DI)是一项要害的性能,它容许咱们无效地管理应用程序中的依赖关系。Angular 的依赖注入零碎应用 InjectionToken 来实现某些非凡的依赖注入需要。在本文中,我将具体解释 InjectionToken 的作用,并提供示例以阐明其在 Angular 利用中的理论用处。

什么是依赖注入?

在深刻理解 InjectionToken 之前,让咱们首先理解什么是依赖注入。依赖注入是一种设计模式,它容许咱们将一个对象的依赖关系(例如,服务或配置)注入到另一个对象中,而不须要硬编码这些依赖关系。这样做的益处包含:

  1. 可维护性:通过将依赖关系注入到组件中,咱们能够轻松更改这些依赖项,而不用批改大量的代码。
  2. 可测试性:咱们能够轻松地为组件提供模仿的依赖项,以进行单元测试,而无需理论创立这些依赖项的实例。
  3. 松耦合:依赖注入帮忙咱们实现松耦合,使各个组件之间的关系更加灵便。

在 Angular 中,依赖注入是内置的,Angular 的依赖注入容器负责管理依赖项的创立和生命周期。

为什么须要 InjectionToken?

通常状况下,Angular 的依赖注入零碎能够主动解析依赖项的类型并为其创立实例。例如,如果您须要在组件中应用一个服务,只需将该服务的类型申明为该组件的结构函数参数,Angular 将会主动创立该服务的实例并注入到组件中,如下所示:

import {Component} from '@angular/core';
import {MyService} from './my-service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent {constructor(private myService: MyService) {// 应用 myService}
}

然而,有时候咱们须要注入的依赖项不是一个类的实例,而是一个配置项、字符串、或其余非类的值。这就是 InjectionToken 的用武之地,它容许咱们将非类的值作为依赖项注入到组件或服务中。

InjectionToken 的作用

InjectionToken的作用是定义一个标识符,用于标识依赖项。它容许咱们将任何值注入到 Angular 组件或服务中,而不仅仅是类的实例。通常状况下,咱们会在应用程序中的某个中央创立InjectionToken,而后在须要注入该值的中央应用它。

以下是 InjectionToken 的次要作用:

  1. 唯一性标识 InjectionToken 是一个惟一的标识符,确保依赖项的唯一性。这对于避免依赖项的混同或抵触十分重要。
  2. 非类依赖注入 InjectionToken 容许咱们注入任何值,而不仅仅是类的实例。这在配置、常量、字符串等场景中十分有用。
  3. 提供器配置 :通过提供器配置,咱们能够通知 Angular 如何为InjectionToken 提供依赖项的实例。这使得咱们能够在不同的上下文中为 InjectionToken 提供不同的值。

当初,让咱们通过一些示例具体阐明 InjectionToken 的用法和作用。

示例一:注入配置

假如咱们有一个应用程序,它须要依据用户的首选语言加载不同的国际化配置。咱们能够应用 InjectionToken 来注入以后用户的首选语言配置。首先,咱们须要创立一个 InjectionToken 来示意这个配置:

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

export const LANG_CONFIG = new InjectionToken<string>('langConfig');

下面的代码创立了一个名为 LANG_CONFIGInjectionToken,它示意一个字符串类型的依赖项,用于存储语言配置。

接下来,咱们能够在 Angular 模块中配置如何提供这个依赖项的实例:

import {NgModule} from '@angular/core';
import {LANG_CONFIG} from './config.tokens';

@NgModule({
  providers: [
    {
      provide: LANG_CONFIG,
      useValue: 'en-US' // 默认语言配置
    }
  ]
})
export class AppModule {}

在下面的代码中,咱们在模块的提供器中配置了 LANG_CONFIG 的默认值为 en-US。这意味着如果没有其余中央提供LANG_CONFIG 的理论值,它将默认为en-US

当初,咱们能够在组件中注入这个配置,并依据用户的首选语言进行相应的操作:

import {Component, Inject} from '@angular/core';
import {LANG_CONFIG} from './config.tokens';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent {constructor(@Inject(LANG_CONFIG) private langConfig: string) {// 应用 langConfig 来加载对应的国际化资源}
}

在下面的组件中,咱们应用 @Inject 装璜器来注入LANG_CONFIG,而后能够依据用户的首选语言配置执行相应的操作。

这个示例展现了如何应用 InjectionToken 来注入应用程序的配置项,而不是类的实例

示例二:自定义注入令牌

除了用于配置,InjectionToken还能够用于自定义依赖注入的标识符。假如咱们有一个应用程序,它须要同时加载两个不同版本的某个服务,咱们能够应用不同的 InjectionToken 来辨别它们。

首先,咱们创立两个不同的 InjectionToken 来示意这两个版本的服务:

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

export const SERVICE_V1 = new InjectionToken('service_v1');
export const SERVICE_V2 = new InjectionToken('service_v2');

而后,咱们能够在模块中配置这两个服务的提供形式:

import {NgModule} from '@angular/core';
import {SERVICE_V1, SERVICE_V2} from './service.tokens';
import {ServiceV1} from './service-v1';
import {ServiceV2} from './service-v2';

@NgModule({
  providers: [
    {
      provide: SERVICE_V1,
      useClass: ServiceV1
    },
    {
      provide: SERVICE_V2,
      useClass: ServiceV2
    }
  ]
})
export class AppModule {}

在下面的代码中,咱们为 SERVICE_V1 提供了 ServiceV1 的实现,为 SERVICE_V2 提供了 ServiceV2 的实现。

当初,咱们能够在组件中注入这两个服务,并应用它们的不同版本:

import {Component, Inject} from '@angular/core';
import {SERVICE_V1, SERVICE_V2} from './service.tokens';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent {
  constructor(@Inject(SERVICE_V1) private serviceV1: any,
    @Inject(SERVICE_V2) private serviceV2: any
  ) {// 应用 serviceV1 和 serviceV2 的不同版本}
}

在下面的组件中,咱们应用不同的 InjectionToken 注入了两个不同版本的服务,这使得咱们能够在同一个应用程序中应用它们的不同实现。

示例三:跨模块通信

有时,咱们心愿在不同的模块之间共享某些值,例如应用程序的全局配置。InjectionToken能够用于实现跨模块的通信。

假如咱们有一个外围模块,它蕴含了一些全局配置信息,咱们心愿其余模块可能拜访这些配置信息。首先,咱们在外围模块中创立一个 InjectionToken 来示意全局配置:

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

export const GLOBAL_CONFIG = new InjectionToken('global_config');

而后,在外围模块中配置全局配置的值:

import {NgModule} from '@angular/core';
import {GLOBAL_CONFIG} from './core.tokens';

@NgModule({
  providers: [
    {
      provide: GLOBAL_CONFIG,
      useValue: {
        apiUrl: 'https://api.example.com',
        debugMode: false
      }
    }
  ]
})
export class CoreModule {}

当初,任何须要拜访全局配置的模块或组件都能够注入 GLOBAL_CONFIG 并拜访全局配置的值:

import {Component, Inject} from '@angular/core';
import {GLOBAL_CONFIG} from './core.tokens';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent {constructor(@Inject(GLOBAL_CONFIG) private globalConfig: any) {// 拜访全局配置的值,例如 globalConfig.apiUrl}
}

这个示例展现了如何应用 InjectionToken 在不同的模块之间共享全局配置信息。

总结

InjectionToken是 Angular 依赖注入零碎的一个重要组成部分,它容许咱们注入非类依赖项,自定义依赖注入的标识符,并实现跨模块通信。通过正当应用 InjectionToken,咱们能够进步 Angular 应用程序的可维护性、可测试性,并实现松耦合的设计。心愿本文中的示例有助于您更好地了解InjectionToken 的作用和用法,以在您的 Angular 我的项目中充分发挥其威力。

正文完
 0