Angular InjectionToken 抛出“没有 InjectionToken 提供者”

typescript

在使用Angular开发应用程序时，我们经常需要使用依赖注入来管理组件之间的依赖关系。Angular提供了一种特殊的类Injectable来实现依赖注入，但有时我们可能需要更灵活的方式来定义依赖关系。这就是Angular的InjectionToken的用武之地。

什么是InjectionToken？

在Angular中，InjectionToken是一种特殊类型的令牌(token)，用于标识依赖项的提供者。可以将它看作是一个唯一的标识符，用于识别和解析依赖项。与使用类作为依赖标识符不同，InjectionToken可以是任何类型的值。

为什么要使用InjectionToken？

使用InjectionToken的一个主要原因是为了避免依赖冲突。当我们在应用程序中使用多个相同类型的依赖项时，Angular的依赖注入系统可能会出现冲突。使用InjectionToken可以确保我们使用的是正确的依赖项。

此外，InjectionToken还可以用于传递配置信息或全局设置。通过将配置信息封装在InjectionToken中，我们可以在整个应用程序中共享这些配置。

如何使用InjectionToken？

要使用InjectionToken，首先需要定义一个InjectionToken实例。这可以通过创建一个常量来实现，例如：

typescript
import { InjectionToken } from '@angular/core';
export const MY_TOKEN = new InjectionToken<string>('my-token');

在上面的例子中，我们创建了一个名为MY_TOKEN的InjectionToken实例，并指定了它的类型为string。

接下来，我们可以在组件或服务的构造函数中使用InjectionToken来注入依赖项。例如，假设我们有一个名为MyService的服务，它依赖于MY_TOKEN，我们可以这样写：

typescript
import { Injectable, Inject } from '@angular/core';
import { MY_TOKEN } from './constants';
@Injectable()
export class MyService {
  constructor(@Inject(MY_TOKEN) private myToken: string) {
    console.log(myToken);
  }
}

在上面的示例中，我们使用@Inject装饰器将MY_TOKEN注入到MyService的构造函数中，并将其保存在私有属性myToken中。现在，我们可以在服务中使用myToken属性来访问MY_TOKEN的值。

解决“没有InjectionToken提供者”的错误

当我们在使用InjectionToken时，有时可能会遇到一个错误消息：“没有InjectionToken提供者”。这通常是因为我们忘记在应用程序的根模块或共享模块中提供InjectionToken的提供者。

要解决这个错误，我们需要在模块的providers数组中添加一个提供者，将InjectionToken与其具体的实现关联起来。例如，假设我们想要在根模块中使用MY_TOKEN，我们可以这样写：

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MY_TOKEN } from './constants';
@NgModule({
  imports: [BrowserModule],
  providers: [
    { provide: MY_TOKEN, useValue: 'my value' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的示例中，我们使用providers数组将MY_TOKEN与一个字符串值关联起来。这样，当我们在应用程序中注入MY_TOKEN时，Angular将使用提供的值来解析依赖项。

使用Angular的InjectionToken可以帮助我们更灵活地定义和管理依赖关系。它可以避免依赖冲突，并且可以用于传递配置信息或全局设置。当使用InjectionToken时，要记得在模块的providers数组中添加提供者，以解决“没有InjectionToken提供者”的错误。

希望本文能帮助你更好地理解和使用Angular的InjectionToken。祝你在Angular开发中取得成功！