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


当前回答

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

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

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

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

其他回答

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

export class ProductComponent {
    productList: Array<Product>;

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

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

就我而言,原因如下:

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

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

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

在我的例子中,我对一个没有依赖关系的服务采取了依赖关系,因此我没有向服务类添加constructor()函数。我向依赖的服务类添加了一个无参数构造函数,一切都开始工作了。

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

假设你有类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) {}
}

在我的例子中,那是我升级到主版本的TypeScript版本,以及我添加到一些Class属性中的赋值断言。

恢复更改为我解决了这个问题。(细节)