Question

我正在关注依赖注入的角度文档，并尝试复制dependency injection tokens上的部分。

在单独的JS模块中定义OpaqueToken

// app-config.ts
import { OpaqueToken } from '@angular/core';

export let APP_CONFIG = new OpaqueToken('app.config');

// use class instead of interface
export interface AppConfig {
  apiEndpoint: string;
  title: string;
}

export const HERO_DI_CONFIG: AppConfig = {
  apiEndpoint: 'api.heroes.com',
  title: 'Dependency Injection'
};

导入APP_CONFIG＆amp;还定义APP_CONFIG2

// app-modules.ts
import { APP_CONFIG, HERO_DI_CONFIG } from './app-config.ts';
export let APP_CONFIG2 = new OpaqueToken('app.config2');

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  providers: [
    {provide: APP_CONFIG, useValue: HERO_DI_CONFIG},
    {provide: APP_CONFIG2, useValue: HERO_DI_CONFIG},
  ],
  bootstrap: [ App ]
})

和inject进入Component构造函数

// app.ts
import { APP_CONFIG, AppConfig } from './app-config.ts'
import { APP_CONFIG2 } from './app-module.ts'

export class App {
  constructor(
    @Inject(APP_CONFIG) public opaqueToken: AppConfig
    @Inject(APP_CONFIG2) public opaqueToken2: any
  ) {
    this.name = 'Angular2'
    this.local = LOCAL_STRING
  }
}

正确注入在外部模块中定义的

APP_CONFIG，但APP_CONFIG2与provide在同一模块中定义会引发错误。那是为什么？

VM466 zone.js:323Error: (SystemJS) Error: Can't resolve all parameters for App: (Token_app_config, ?,

这是一个傻瓜：http://plnkr.co/edit/5TkKAozC2vjXI9DfjMLg?p=preview

Answer 1

这不是Angular的问题，而是es6模块之间的循环依赖。

在您的示例中，app.ts从APP_CONFIG导入app.module.ts 和来自app.module.ts的{{1}} App。{/ p>

这会创建一个无法解析的循环依赖。

Answer 2

要使其有效，您必须从APP_CONFIG2导出app-config.ts并从app-config.ts和app-modules.ts文件中的app.ts导入：

// app-config.ts
import { OpaqueToken } from '@angular/core';

export let APP_CONFIG = new OpaqueToken('app.config');
export let APP_CONFIG2 = new OpaqueToken('app.config');

angular2模块：使用OpaqueToken的依赖注入可以从JS模块工作，但不能内联

2 个答案: