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


当前回答

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

export class ProductComponent {
    productList: Array<Product>;

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

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

其他回答

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

在我的情况下,这是因为插件Augury,禁用它将工作得很好。替代选项是aot,也工作。

所有功劳都归功于@Boboss74,他在这里发布了答案:https://github.com/angular/angular/issues/23958

如果您的服务与使用它的组件定义在同一个文件中,并且服务定义在文件中的组件之后,您可能会得到此错误。这是由于其他人提到的相同的“forward dref”问题。此时,VSCode并不能很好地向您显示这个错误,并且构建编译成功。

由于编译器的工作方式(可能与树摇晃有关),使用——aot运行构建可以掩盖这个问题。

解决方案:确保在另一个文件中或在组件定义之前定义服务。(我不确定在这种情况下是否可以使用forwardRef,但这样做似乎很笨拙)。

如果我有一个非常简单的服务,它与组件紧密地绑定在一起(有点像视图模型)。ImageCarouselComponent,我可以把它命名为ImageCarouselComponent。service。ts这样它就不会和其他服务混在一起。

为了搜索者的利益;我得到了这个错误。这只是一个丢失的@符号。

也就是说,这会产生无法解析MyHttpService的所有参数的错误。

Injectable()
export class MyHttpService{
}

添加缺少的@符号可以修复它。

@Injectable()
export class MyHttpService{
}

从直接声明它的文件中导入,而不是从桶中导入。

我不知道是什么导致了这个问题,但我看到它被提到过几次(可能是某种循环依赖)。

它也应该可以通过改变桶中的出口顺序来修复(不知道细节,但也提到了)