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 :(?)의 모든 매개 변수를 확인할 수 없습니다.
부트 스트랩 기능에 서비스가 있으므로 공급자가 있습니다. 그리고 나는 그것을 문제없이 다른 구성 요소의 생성자에 주입 할 수있는 것 같습니다.
답변
배럴 대신 직접 선언 된 파일에서 가져옵니다.
정확히 문제의 원인을 모르겠지만 여러 번 언급했을 것입니다 (아마도 일종의 순환 종속성).
또한 배럴의 수출 순서를 변경하여 해결할 수 있어야합니다 (세부 사항은 모르지만 언급되었습니다)
답변
주어진 이전 답변 외에도 주사 가능한 서비스에 실제 @Injectable()
데코레이터 가 없으면이 오류가 발생하는 것 같습니다 . 따라서 주기적 종속성 항목과 가져 오기 / 내보내기 순서를 디버그하기 전에 서비스가 실제로 @Injectable()
정의되어 있는지 간단한 확인을 수행하십시오 .
이것은 현재 Angular 최신 인 Angular 2.1.0에 적용됩니다.
답변
Angular 2.2.3
에는 forwardRef()
아직 정의되지 않은 공급자를 주입 할 수 있는 유틸리티 기능이 있습니다.
정의되지 않았으므로 종속성 주입 맵이 식별자를 알지 못합니다. 이것은 순환 종속성 동안 발생합니다. Angular에서 원형 의존성으로 인해 풀거나보기가 매우 어렵습니다.
export class HeaderComponent {
mobileNav: boolean = false;
constructor(@Inject(forwardRef(() => MobileService)) public ms: MobileService) {
console.log(ms);
}
}
@Inject(forwardRef(() => MobileService))
원래 질문의 소스 코드에서 생성자의 매개 변수에 추가 하면 문제가 해결됩니다.
참고 문헌
답변
잘못된 # 1 : 잊어 버린 데코레이터 :
//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
export class MyFooService { ... }
잘못된 # 2 : “@”기호 생략
//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
Injectable()
export class MyFooService { ... }
잘못된 # 3 : “()”기호 생략
//Uncaught Error: Can't resolve all parameters for TypeDecorator: (?).
@Injectable
export class MyFooService { ... }
잘못된 # 4 : 소문자 “i”:
//Uncaught ReferenceError: injectable is not defined
@injectable
export class MyFooService { ... }
잘못된 # 5 : 당신은 잊었다 :
import {Injectable} from ‘@ angular / core’;
//Uncaught ReferenceError: Injectable is not defined
@Injectable
export class MyFooService { ... }
옳은:
@Injectable()
export class MyFooService { ... }
답변
이미 언급 한 바와 같이,이 문제는 순환 의존성으로 인해 배럴 내 수출 주문으로 인해 발생합니다.
자세한 설명은 다음과 같습니다. https://stackoverflow.com/a/37907696/893630
답변
또한 서비스 A를 서비스 B에 주입하고 그 반대도 마찬가지입니다.
어쨌든 피해야하기 때문에 이것이 빨리 실패하는 것이 좋은 것이라고 생각합니다 . 서비스를보다 모듈화하고 재사용 할 수있게하려면 순환 참조를 최대한 피하는 것이 가장 좋습니다. 이 게시물 은 그 주변의 함정을 강조합니다.
따라서 다음 권장 사항이 있습니다.
- 당신은 클래스가 너무 자주 (I 이야기하고 상호 작용 느끼면 기능 선망 ), 당신이 고려하는 것이 좋습니다 1 개 클래스로이 개 서비스를 병합 .
- 위의 방법으로 문제가 해결되지 않으면 메시지를 교환하기 위해 두 서비스 모두에 삽입 할 수 있는 3 번째 서비스 (
EventService
)를 사용해보십시오 .
답변
검색 자의 이익을 위해; 이 오류가 발생했습니다. 단순히 누락 된 @ 기호였습니다.
즉 Can't resolve all parameters for MyHttpService
오류가 발생합니다.
Injectable()
export class MyHttpService{
}
누락 된 @
기호를 추가하면 문제가 해결됩니다.
@Injectable()
export class MyHttpService{
}