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

当前回答

虽然已经提到了从桶中导出类的排序，但下面的场景也可能产生相同的效果。

假设你有类A, B和C从同一个文件中导出，其中A依赖于B和C:

@Injectable()
export class A {
    /** dependencies injected */
    constructor(private b: B, private c: C) {}
}

@Injectable()
export class B {...}

@Injectable()
export class C {...}

因为Angular还不知道依赖类(比如类B和C)，(可能是在运行时Angular对类A的依赖注入过程中)就会引发这个错误。

解决方案

解决方案是在执行DI的类之前声明和导出依赖类。

例如，在上面的例子中，类A是在它的依赖关系定义之后声明的:

@Injectable()
export class B {...}

@Injectable()
export class C {...}

@Injectable()
export class A {
    /** dependencies injected */
    constructor(private b: B, private c: C) {}
}

2018-02-22 10:49:51

其他回答

导入路径是区分大小写的。检查您使用服务的所有地方的服务路径是否正确，并检查所有地方的字母大小写是否正确且相同。

2020-06-24 20:18:31

就我而言，原因如下:

我的可注入服务A扩展了另一类B B有一个需要参数的构造函数我没有在A中定义任何构造函数

因此，在尝试创建对象a时，默认构造函数失败了。我不知道为什么这不是一个编译错误。

我通过在a中添加一个构造函数来解决这个问题，它正确地调用了B的构造函数。

2018-09-28 16:04:12

如前所述，这个问题是由桶内的导出排序引起的，而桶内的导出排序是由循环依赖关系引起的。

更详细的解释在这里:https://stackoverflow.com/a/37907696/893630

2016-06-25 01:16:05

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

mComponent.component.ts:

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

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

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

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

2018-04-24 22:52:47

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

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

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

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

2019-05-02 22:45:12

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

推荐文章

最新文章

标签