当试图将一个服务注入到一个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 6和更新的版本，请尝试

@Injectable({
  providedIn: 'root'
})

．．就在你的服务等级上面，中间没有其他线

优势

不需要将服务添加到任何模块(将“自动发现”) 服务将是一个单例(因为它将被注入根目录)

(角文档)

2020-04-27 10:10:48

其他回答

除了前面给出的答案外，当您的可注射服务缺少实际的@Injectable()装饰器时，似乎也会抛出这个错误。因此，在调试循环依赖关系以及导入/导出的顺序之前，请简单检查一下服务是否确实定义了@Injectable()。

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

我就此事发表了一期文章。

2016-10-23 00:56:39

错误#1:忘记装饰:

//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
export class MyFooService { ... }

错误2:省略“@”符号:

//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
Injectable()
export class MyFooService { ... }

错误#3:省略“()”符号:

//Uncaught Error: Can't resolve all parameters for TypeDecorator: (?).
@Injectable
export class MyFooService { ... }

错误4:小写的“i”:

//Uncaught ReferenceError: injectable is not defined
@injectable
export class MyFooService { ... }

错误5:你忘了: import {Injectable} from @angular/core;

//Uncaught ReferenceError: Injectable is not defined
@Injectable
export class MyFooService { ... }

正确的:

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

2017-11-27 18:52:49

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

2020-06-24 20:18:31

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

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

因此，我有以下建议:

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

2016-11-09 15:05:35

您可以重试执行如下命令:

发球——开球

2020-03-23 08:04:50

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

推荐文章

最新文章

标签