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


当前回答

在我的情况下,修复是替换相对路径与绝对 之前

import {Service} from './service';

import {Service} from 'src/app/services/service';

看起来是typescript/angular的问题

其他回答

如果服务A依赖于服务B的静态属性/方法,而服务B本身依赖于服务A的槽依赖注入,则会出现此错误。所以这是一种循环依赖,尽管它不是,因为属性/方法是静态的。可能是与AOT一起出现的错误。

import {Injector} from '@angular/core'; import {ServiceA} from './service-a'; @ component ({ / /…… }) 类MyComp { 构造函数(私有注入器:injector) { const serviceA = injector.get(serviceA); } }

问题是,模块中的元素应该对属于同一模块的元素使用相对导入;它们永远不应该通过模块的公共API桶(或一般的桶)导入。

该导入的问题是,如果依赖于服务的某些东西首先在桶中加载(直接或不直接),那么DI系统将失败,因为服务还没有声明,因此无法解决。

尝试从absolute更改import:

import { UserService } from 'src/app/users/user.service';

相对:

import { UserService } from '../../users/user.service';

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

对我来说,停止应用程序并发出ng服务解决了这个问题