尝试将服务注入角组件时出错"异常：无法解析组件的所有参数"，为什么？

Question

我已经在Angular中构建了一个基本的应用程序，但是我遇到了一个奇怪的问题，我不能将服务注入到我的组件中。然而，它将精细注入我创建的其他三个组件中的任何一个。

首先，这是一项服务：

import { Injectable } from '@angular/core';

@Injectable()
export class MobileService {
  screenWidth: number;
  screenHeight: number;

  constructor() {
    this.screenWidth = window.outerWidth;
    this.screenHeight = window.outerHeight;

    window.addEventListener("resize", this.onWindowResize.bind(this) )
  }
  
  onWindowResize(ev: Event) {
    var win = (ev.currentTarget as Window);
    this.screenWidth = win.outerWidth;
    this.screenHeight = win.outerHeight;
  }
  
}

以及拒绝使用的组件：

import { Component, } from '@angular/core';
import { NgClass } from '@angular/common';
import { ROUTER_DIRECTIVES } from '@angular/router';

import {MobileService} from '../';

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
})
export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(public ms: MobileService) {
    console.log(ms);
  }

}

我在浏览器控制台中遇到的错误如下：

异常：无法解析HeaderComponent:（？）的所有参数。

我在引导功能中有服务，所以它有一个提供者。我似乎可以将它注入到我的任何其他组件的构造函数中，没有问题。

Answer 1

从Angular2.2.3开始，现在有一个forwardRef（）实用程序函数，允许您插入尚未定义的提供程序。

通过未定义，我的意思是依赖注入映射不知道标识符。这就是循环依赖关系期间发生的情况。在Angular中，您可以有非常难以解开和查看的循环依赖关系。

export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(@Inject(forwardRef(() => MobileService)) public ms: MobileService) {
    console.log(ms);
  }

}

添加@Inject（forwardRef）（）=

角2手册：转发参考

角2中的正向引用

Answer 2

除了前面给出的答案外，当您的可注入服务缺少实际的@injectable（）装饰器时，似乎也会抛出此错误。因此，在调试循环依赖项和导入/导出顺序之前，请简单检查您的服务是否实际定义了@Injectable（）。

这适用于当前最新的Angular 2.1.0。

我就这件事提出了一个问题。

Answer 3

从直接声明它的文件（而不是桶）导入它。

我不知道到底是什么导致了这个问题，但我看到它被提到了几次（可能是某种循环依赖）。

它也应该可以通过改变桶中出口的顺序来修复（不知道细节，但也提到了）