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

3次阅读

共计 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_CONFIG 的InjectionToken，它示意一个字符串类型的依赖项，用于存储语言配置。

接下来，咱们能够在 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 我的项目中充分发挥其威力。

正文完
angular
发表至： angular
2023-09-24
 0
关于angular:angular-依赖注入
关于angular:slateangular-正式开源
关于angular:JSP和Servlet的性能优化
关于angular:angluar中在input标签动态设置选择日期

站内搜索

-「」