当试图将一个服务注入到一个angular组件中时出现错误:"EXCEPTION: Can't resolve all parameters for component"，为什么?

我已经用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);
  }

}

我在浏览器控制台得到的错误是这样的:

EXCEPTION:不能解析HeaderComponent:(?)的所有参数。

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

当前回答

从Angular 2.2.3开始，现在有了一个forwardRef()实用函数，它允许你注入尚未定义的提供程序。

所谓没有定义，我的意思是依赖注入映射不知道标识符。这就是循环依赖关系期间发生的情况。在Angular中，你可能会有循环依赖关系，它们很难理清和观察。

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

在原始问题的源代码中，将@Inject(forwardRef(() => MobileService)添加到构造函数的参数将解决这个问题。

参考文献

Angular 2手动:ForwardRef

Angular 2中的正向引用

2016-12-12 01:37:55

其他回答

对我来说，这是一种循环引用。我让MyService调用Myservice2 和MyService2调用MyService。

不太好:(

2018-09-25 08:45:14

从Angular 2.2.3开始，现在有了一个forwardRef()实用函数，它允许你注入尚未定义的提供程序。

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

在原始问题的源代码中，将@Inject(forwardRef(() => MobileService)添加到构造函数的参数将解决这个问题。

参考文献

Angular 2手动:ForwardRef

Angular 2中的正向引用

2016-12-12 01:37:55

在我的情况下，添加“emitDecoratorMetadata”和“esModuleInterop”解决了这个问题。

https://github.com/thymikee/jest-preset-angular/issues/288

2020-10-16 11:46:31

对我来说，这个问题甚至更烦人，我正在使用服务中的服务，忘记在appModule中添加它作为依赖项! 希望这能帮助一些人节省几个小时的应用程序分解，只是重新建立它

2017-01-24 16:03:09

我试了这里给出的几乎所有答案，但没有一个对我有帮助。

对我来说有用的是在Visual Studio Code中关闭项目，打开文件资源管理器，进入我的项目并删除dist文件夹。