Angular 2 依赖注入 - 服务被注入某些组件但不是全部

Question

我正在开发一个 Angular 2 应用程序，该应用程序只有一个模块，其中多个服务在引导程序中注册为提供程序。该应用程序在同一模块中还有几个组件正在使用这些服务。

所有组件都使用 DI 接收服务（服务在构造函数中声明为参数）。

我面临的问题是：在某些组件中正确注入了相同的服务，但在其他没有。

我在 Injector 对象中检查了注入失败且服务实例位于 Injector 对象中的组件。它失败的是使用 Injector.get() 方法进行搜索。作为参数提供的令牌与存储在 Injector 字典中的令牌不同。我无法找出原因，因为我正在使用服务的类名，并且令牌是由 Javascript 引擎从该类名自动生成的。

我尝试使用 OpaqueTokens 来控制注入，同样，即使我使用相同的不透明令牌，当调用 Injector.get() 方法时，参数提供的令牌被认为与注入器存储的令牌不同.

代码中的一小段看起来像

myservice.service.ts

import { OpaqueToken } from '@angular/core'

export const BACKEND = new OpaqueToken('backend');

app.module.ts

import { BACKEND } from 'myservice.service'
...
providers: [{ provide: BACKEND, useValue: "TestValue" }]

mycomponent.component.ts

import { Component, Inject } from '@angular/core'
import { BACKEND } from 'myservice.service'

@Component(
{
selector:'mycomponent'
templateUrl: ...
})
export class MyComponent
{
  constructor(@Inject(BACKEND) config: string) {
    console.info(JSON.stringify(config));
  }
}

这种带有 BACKEND 令牌的注入适用于某些组件，但不适用于其他组件（注入了空的 {} 对象）。我尝试在浏览器中调试 Javascript 代码，看起来注入器被调用的令牌与字典中的令牌不同（它们看起来相同，具有相同的名称“后端”但仍然不同，=== 返回 false） .

注意：我使用 Angular 2.4.2、Typescript 2.1 和“commonjs”模块和“节点”模块解析。 systemjs 用作模块加载器。

请问，您能否提供一些有关如何解决此问题的想法？

谢谢，

Answer 1

• 您是否有来自不同模块/组件的各种提供程序声明？对于 providers 数组中的每个声明，Angular 都会创建这些服务的一个新实例。

• @Injectable 装饰器中是否包含括号？ https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#injectable