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

当前回答

我在输入错误的服务名称时遇到了这个错误，即构造函数(私有myService: myService)。

对于拼写错误的服务，我能够通过检查Chrome->控制台中的页面来确定哪个服务是问题(我在构造函数中列出了几个)。您将看到作为消息的一部分的“参数”数组列表显示对象对象，对象对象，?(或者类似的事情)。请注意“?”在哪里，这是引起问题的服务的位置。

2017-02-06 20:21:32

其他回答

除了缺少@Injectable()装饰器之外

抽象类中缺少@Injectable()装饰器会产生Can't resolve all parameters for service:(?) 装饰器需要出现在MyService和派生类BaseService中

//abstract class
@Injectable()
abstract class BaseService { ... }

//MyService    
@Injectable()
export class MyService extends BaseService {
.....
}

2017-10-20 10:23:11

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

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

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

2022-10-23 12:21:28

在我的情况下，我需要添加导入“core-js/es7/reflect”;到我的应用程序使@Injectable工作。

2018-05-15 19:28:54

你必须在@Component decorator中或在组件声明的模块中添加providers数组。在组件内部，你可以这样做:

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
  providers: [MobileService]
})

2017-05-22 07:21:18

在我的例子中，我错过了调用我继承的类的构造函数。

之前:

@Component({ ... })
export class ComponentA extends ComponentParent {
  // ...
}

后:

@Component({ ... })
export class ComponentA extends ComponentParent {
  constructor(protected route: ActivatedRoute, protected store$: Store<AppState>) {
    super(route, store$);
  }
  // ...
}

2019-10-28 12:22:28

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

推荐文章

最新文章

标签