Injectable 클래스가 인스턴스화 될 때 ngOnInit가 호출되지 않음


197

클래스가 해결 ngOnInit()될 때 왜 호출 되지 Injectable않습니까?

암호

import {Injectable, OnInit} from 'angular2/core';
import { RestApiService, RestRequest } from './rest-api.service';

@Injectable()
export class MovieDbService implements OnInit {

    constructor(private _movieDbRest: RestApiService){
        window.console.log('FROM constructor()');
    }

    ngOnInit() {
         window.console.log('FROM ngOnInit()');
    }

}

콘솔 출력

FROM constructor()

답변:


313

OnInit()지시문 및 구성 요소 작업과 같은 라이프 사이클 후크 귀하의 경우 서비스와 같은 다른 유형에서는 작동하지 않습니다. 문서에서 :

구성 요소에는 Angular 자체에서 관리하는 수명주기가 있습니다. Angular는 그것을 생성하고, 렌더링하고, 자식을 생성하고 렌더링하며, 데이터 바인딩 된 속성이 변경 될 때이를 확인하고 DOM에서 제거하기 전에이를 제거합니다.

지시문 및 구성 요소 인스턴스는 Angular가 인스턴스를 생성, 업데이트 및 파괴 할 때 수명주기를 갖습니다.


38
그래서 단순히 ngOnInit논리를 Injectable클래스 의 생성자 로 옮기 시겠습니까? 방금 어떤 이유로 든 생성자에서 논리를 유지해야한다는 독서를 기억했습니다.
Levi Fuller

48
@LeviFuller Yea, 서비스의 경우 생성자에서 초기화를 수행하거나 init 메소드를 더 잘 만들고 생성자에서 호출 할 수 있습니다 (나중에 서비스를 재설정 해야하는 경우).
Sasxa

9
정확하게 는 아니지만 OnInit 은 바인딩과 관련이 있습니다. 생성자에서 사용할 수 없으므로 입력 값이 해결 될 때까지 기다릴 때 사용합니다. 생성자는 여러 번 호출 할 수 있습니다. 예를 들어, 경로를 변경하고 다른 구성 요소를로드 할 때마다 구성 요소가 구성되고 매번 파괴됩니다.
Sasxa

5
또한 배열에 포함하는 위치에 따라 Sevice 여러 번 인스턴스화 할 있다는 점도 주목할 가치가 있습니다 providers. 싱글 톤 서비스를 원한다면 메인 모듈에 넣고 providers컴포넌트 별 서비스를 원한다면 컴포넌트에 직접 추가하십시오.
Askdesigners

4
그의 답변에서 @ SBD580 포인트가 ngOnDestroy주입 된 서비스를 요구하기 때문에 이것은 완전히 잘못된 것은 아닙니다
shusson

48

모든 수명주기 후크에 대해 잘 모르지만 파괴와 관련하여 ngOnDestroy공급자가 파괴 될 때 실제로 Injectable에서 호출됩니다 (예 : 구성 요소에서 제공하는 Injectable).

로부터 docs :

지시문, 파이프 또는 서비스 가 파괴 될 때 호출되는 수명주기 후크 .

파괴에 관심이있는 사람 있다면 질문을 확인 하십시오 .


2
이러한 수치는 ngOnInit. 호출되지 않습니다 :-( 정말 약간 투명 지연 초기화 마술을하고 싶어하는 경우가 ngOnDestroy내가 볼 수없는 호출 할 수있는 이유 초기화는 할 수 없습니다
Simon_Weaver

2

참고 :이 답변은 서비스가 아닌 각도 구성 요소 및 지시문에만 적용됩니다.

ngOnInit구성 요소에 대해 (및 다른 수명주기 후크) 실행되지 않았을 때도 동일한 문제가 발생 했으며 대부분의 검색으로 인해 여기로 이끌었습니다.

문제는 =>다음과 같이 화살표 함수 구문 ( )을 사용하고 있다는 것입니다 .

class MyComponent implements OnInit {
    // Bad: do not use arrow function
    public ngOnInit = () => {
        console.log("ngOnInit");
    }
}

분명히 Angular 6에서는 작동하지 않습니다. 화살표가 아닌 함수 구문을 사용하면 문제가 해결됩니다.

class MyComponent implements OnInit {
    public ngOnInit() {
        console.log("ngOnInit");
    }
}

주사 가능한 클래스는 구성 요소가 아닌 서비스입니다. OP는 서비스에 대해 묻습니다. 귀하의 답변이 언어 POV에서 올바르더라도이 질문에 대한 답변은 아닙니다. 삭제해야합니다.
앤드류 필립스

@AndrewPhilips 사용 사례가 OP와 약간 다르지만 "ngOnInit 호출되지 않음"에 대한 Google 검색으로 인해 사람들이 여기로 연결됩니다. 이 답변의 목표는 OP를 돕는 것이 아니라 유사한 문제가있는 다른 70,000 명 이상의 시청자를 돕는 것입니다 ngOnInit.
AJ Richardson

그럴 수 있지. 저자가 질문 한 다음 자신의 질문에 답변하는 SO Q & A를 보았습니다. 새로운 Angular 프로그래머로서 귀하의 답변은 2 주 전에 저를 혼동했을 것입니다. SO와 NG의 관점에서 귀하의 답변은 자체 질문에 합당하므로 삭제되지 않고 "재 분류"됩니다. 누가 알아? 아마도 더 많은 사람들에게 다가 갈 수 있습니다. 건배.
앤드류 필립스

1
이해하기-이것이 서비스 용이 아님을 명확히하기 위해 답변을 편집했습니다.
AJ Richardson


0
import {Injectable, OnInit} from 'angular2/core';
import { RestApiService, RestRequest } from './rest-api.service';
import {Service} from "path/to/service/";

@Injectable()
export class MovieDbService implements OnInit {

userId:number=null;

constructor(private _movieDbRest: RestApiService,
            private instanceMyService : Service ){

   // do evreything like OnInit just on services

   this._movieDbRest.callAnyMethod();

   this.userId = this.instanceMyService.getUserId()


}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.