angular

Angular 2에서 기본 앱을 만들었지 만 구성 요소 중 하나에 서비스를 주입 할 수없는 이상한 문제가 발생했습니다. 그러나 내가 만든 세 가지 다른 구성 요소 중 하나에 미세하게 주입합니다.

우선, 이것은 서비스입니다 :

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 :(?)의 모든 매개 변수를 확인할 수 없습니다.

부트 스트랩 기능에 서비스가 있으므로 공급자가 있습니다. 그리고 나는 그것을 문제없이 다른 구성 요소의 생성자에 주입 할 수있는 것 같습니다.

답변

export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(@Inject(forwardRef(() => MobileService)) public ms: MobileService) {
    console.log(ms);
  }

}

//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
export class MyFooService { ... }

//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
Injectable()
export class MyFooService { ... }

//Uncaught Error: Can't resolve all parameters for TypeDecorator: (?).
@Injectable
export class MyFooService { ... }

//Uncaught ReferenceError: injectable is not defined
@injectable
export class MyFooService { ... }

//Uncaught ReferenceError: Injectable is not defined
@Injectable
export class MyFooService { ... }

@Injectable()
export class MyFooService { ... }

Injectable()
export class MyHttpService{
}

@Injectable()
export class MyHttpService{
}