使用 InjectionToken 进行注入？答案

【问题标题】：Injection using an InjectionToken?使用 InjectionToken 进行注入？
【发布时间】：2019-07-09 03:21:01
【问题描述】：

尝试使用InjectionToken 注入对象。

在AppModule我有：

    export const tokenConfigKey = new InjectionToken('config');

    const tokenBasedConfig = {
        provide: tokenConfigKey,
        useValue: {
          key: 'value'
      }
    }

而在AppComponent：

    @Component({
      selector: 'my-app',
      template:`<h1>Hello Angular Lovers!</h1>`
    })
    export class AppComponent  {
      constructor(@Inject('config') config,
                  @Inject(tokenConfigKey) configByToken) {
      }
    }

This is a complete stacblitz example

使用字符串键的注入正在通过，但使用令牌的注入失败。任何想法为什么？

文章

Here's an article in case anyone wants to play with this

【问题讨论】：

您是否使用相同的注入令牌实例？换句话说，你有类似...import { tokenConfigKey } from '/path/to/app.module'的东西吗？

标签： javascript angular typescript stackblitz

【解决方案1】：

由于AppModule 导入AppComponent 而AppComponent 从AppModule 导入InjectionToken，可能存在循环依赖问题。

将令牌分开解决问题：

token.ts

import { InjectionToken } from '@angular/core';
export const BASE_URL = new InjectionToken<string>('BaseUrl');

app.module.ts

@NgModule({
  providers: [{ provide: BASE_URL, useValue: { key: 'http://localhost' } }],

app.component.ts

 constructor(@Inject(BASE_URL) configByToken) {
    console.log(configByToken);
  }

【讨论】：

这是更新的 stackblitz 以防万一有人想看：stackblitz.com/edit/…
我将 InjectionToken 移动到 AppComponent 并从那里导出它，这样只有两个文件，没有循环依赖。