问题

我在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);
  }

}
 

我在浏览器控制台中得到的错误是:

异常:无法解析HeaderComponent的所有参数:(?).

我在bootstrap函数中有服务,所以它有一个提供程序.我似乎能够在没有问题的情况下将其注入我的任何其他组件的构造函数中.

  最佳答案

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

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

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

  相同标签的其他问题

angularangular2-di