javascript - Angular 5 - 如何使用在组件上使用 InjectionToken 声明的提供者 key

Question

我正在学习如何实现 Dependency Injection 的各种方法关于 Angular 5。众所周知，Angular 5 有 3 种不同的方法，用于在声明依赖项时声明提供者的 key / token 。

首先，使用Class(最简单、最常见的方式)，例如:

// in app.module.ts
import { HotMail } from './hot-mail';
...
...
...
@NgModule({
  providers: [
    {
      provide: HotMail,
      useClass: HotMail
    }
  ],
})
...
...

然后

// in email.component.ts
import { HotMail } from './hot-mail';
...
...
export class EmailComponent {
  ...
  constructor(private emailService: HotMail) { }
  ...
}

第二，使用字符串(不推荐，因为可能导致名称冲突)，例如:

// in app.module.ts
import { HotMail } from './hot-mail';
...
...
...
@NgModule({
  providers: [
    {
      provide: 'EMS', // Here we are using string
      useClass: HotMail
    }
  ],
})
...
...

然后

// in email.component.ts
import { Inject } from '@angular/core';
// Here we don't need to import HotMail
...
...
export class EmailComponent {
  ...
  constructor(@Inject('EMS') private emailService) { }
  ...
}

第三，使用InjectionToken(比第二种方法更好)，例如:

// in app.module.ts
import { HotMail } from './hot-mail';
import { InjectionToken } from '@angular/core';
...
...
...
const AnyName = new InjectionToken<HotMail>('Any Message');
@NgModule({
  providers: [
    {
      provide: AnyName,
      useClass: HotMail
    }
  ],
})
...
...

然后，问题来了，我找不到一种方法来使用使用 InjectionToken 声明的 token 。 ，当我运行ng serve时它总是返回错误消息，例如当我执行以下操作时:

// in email.component.ts
import { Inject } from '@angular/core';
// Here we don't need to import HotMail
...
...
export class EmailComponent {
  ...
  constructor(@Inject(AnyName) private emailService) { }
  ...
}

它总是返回

ERROR in ../../../email.component.ts: Cannot find name 'AnyName'

如何解决这个问题？

Answer 1

您需要将该 token 导入到您的组件中，然后注入(inject)它。在单独的文件中，您可以将此 token 作为导出成员

export const AnyName = new InjectionToken<HotMail>('Any Message');

然后将其导入到您要使用它的文件中。