Injectable 클래스가 인스턴스화 될 때 ngOnInit가 호출되지 않음
클래스가 해결 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()
OnInit()
지시문 및 구성 요소 작업과 같은 라이프 사이클 후크 귀하의 경우 서비스와 같은 다른 유형에서는 작동하지 않습니다. 문서에서 :
구성 요소에는 Angular 자체에서 관리하는 수명주기가 있습니다. Angular는 그것을 생성하고, 렌더링하고, 자식을 생성하고 렌더링하며, 데이터 바인딩 된 속성이 변경 될 때이를 확인하고 DOM에서 제거하기 전에이를 제거합니다.
지시문 및 구성 요소 인스턴스는 Angular가 인스턴스를 생성, 업데이트 및 파괴 할 때 수명주기를 갖습니다.
모든 수명주기 후크에 대해 잘 모르지만 파괴와 관련하여 ngOnDestroy
공급자가 파괴 될 때 실제로 Injectable에서 호출됩니다 (예 : 구성 요소에서 제공하는 Injectable).
로부터 docs :
지시문, 파이프 또는 서비스 가 파괴 될 때 호출되는 수명주기 후크 .
파괴에 관심이있는 사람 이 있다면 이 질문을 확인 하십시오 .
참고 :이 답변은 서비스가 아닌 각도 구성 요소 및 지시문에만 적용됩니다.
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");
}
}
서비스 resolvers
에서이 게시물에 설명 된 것과 동일한 목적으로 사용할 수 있습니다 : https://codeburst.io/understanding-resolvers-in-angular-736e9db71267
리졸버의 사용을 이해하기 위해 누군가 링크를 클릭 할 때 흐름이 어떻게 발생하는지 봅시다.
일반적인 라우팅 흐름.
- 사용자가 링크를 클릭하십시오.
- 각도는 각 구성 요소를로드합니다.
리졸버를 사용한 라우팅 흐름
사용자가 링크를 클릭하십시오.
Angular는 특정 코드를 실행하고 값 또는 관찰 가능 값을 반환합니다.
로드 할 구성 요소의 클래스에서 생성자 또는 ngOnInit에서 반환 된 값 또는 관찰 가능한 값을 수집 할 수 있습니다.
수집 된 데이터를 목적에 맞게 사용하십시오.
이제 컴포넌트를로드 할 수 있습니다.
2, 3, 4 단계는 Resolver라는 코드로 수행됩니다.
'Programing' 카테고리의 다른 글
Android Studio 2.0에서 즉시 실행 (끄는 방법) (0) | 2020.05.22 |
---|---|
장고-쿼리 결과 제한 (0) | 2020.05.22 |
InvokeRequired 코드 패턴 자동화 (0) | 2020.05.22 |
java.lang.ClassNotFoundException 가져 오기 : org.apache.commons.logging.LogFactory 예외 (0) | 2020.05.22 |
웹앱에서 모바일 카메라에 액세스하는 방법은 무엇입니까? (0) | 2020.05.22 |