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


当前回答

明白了!

如果以上答案都对您没有帮助,那么您可能正在从组件注入服务的同一个文件中导入某个元素。

我解释得更好:

这是服务文件:

// your-service-file.ts
import { helloWorld } from 'your-component-file.ts'

@Injectable()
export class CustomService() {
  helloWorld()
}

这是组件文件:

@Component({..})
export class CustomComponent {
  constructor(service: CustomService) { }
}

export function helloWorld() {
  console.log('hello world');
}

因此,即使符号不在同一个组件中,而只是在同一个文件中,也会引起问题。将符号(可以是函数、常量、类等等)移动到其他地方,错误就会消失

其他回答

从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中的正向引用

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

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

对于angular 6和更新的版本,请尝试

@Injectable({
  providedIn: 'root'
})

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

优势

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

(角文档)

这个答案可能对这个问题很有帮助。此外,在我的例子中,导出默认服务是原因。

错误的:

@Inject()
export default class MobileService { ... }

正确的:

@Inject()
export class MobileService { ... }

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

之前:

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

后:

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