我已经用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函数中有服务,所以它有一个提供者。而且我似乎能够将它注入到任何其他组件的构造函数中而没有任何问题。


当前回答

在我的例子中,我从同一个组件文件中导出了一个类和一个Enum:

mComponent.component.ts:

export class MyComponentClass{...}
export enum MyEnum{...}

然后,我试图从MyComponentClass的子类中使用MyEnum。这导致了“不能解决所有参数”错误。

通过将MyEnum从MyComponentClass移动到一个单独的文件夹中,这解决了我的问题!

正如Günter Zöchbauer提到的,这是因为服务或组件是循环依赖的。

其他回答

在我的例子中,将错误的参数传递给构造函数会产生这个错误,关于这个错误的基本思想是,你在不知不觉中传递了一些错误的参数给任何函数。

export class ProductComponent {
    productList: Array<Product>;

    constructor(productList:Product) { 
         // productList:Product this arg was causing error of unresolved parameters.
         this.productList = [];
    }
}

我通过去掉这个参数来解决这个问题。

通过将服务A注入到服务B中,我也遇到了这种情况,反之亦然。

我认为这种快速失败是件好事,因为无论如何都应该避免。如果您希望您的服务更加模块化和可重用,最好尽可能避免循环引用。这篇文章强调了围绕这一点的陷阱。

因此,我有以下建议:

如果您觉得类之间的交互太频繁(我说的是特性嫉妒),您可能会考虑将这两个服务合并到一个类中。 如果上面的方法对你不起作用,考虑使用第三个服务(EventService),两个服务都可以注入它来交换消息。

对我来说,这只是@Injectable缺少()。正确的是@Injectable()

由于错误中缺乏反馈,这可能是一个非常难以调试的问题。如果你关心一个实际的循环依赖,这里是在堆栈跟踪中最重要的东西:a)服务的名称;b)该服务中带有问号的构造函数参数,例如,如果它看起来像这样:

无法解析AuthService的所有参数([object object]) [object object], [object object], [object object], ?

那么它意味着第五个参数也是一个依赖于AuthService的服务。即问号,表示未被DI解决。

从这里开始,您只需要通过重新构造代码来解耦这两个服务。

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

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

然后我对所有的库进行了每个构建,然后在npm start中重新运行项目。