03 라이프사이클 후크(Lifecycle hooks) 04

OnInit 및 OnDestroy 감시하기

이 두 스파이 훅으로 비밀리에 가면 엘리먼트가 초기화되거나 파기되는 시기를 알 수 있습니다.

이것은 디렉티브에 대한 완벽한 침투 작업입니다. 영웅들은 그들이 지켜봐지고 있다는 것을 결코 알지 못할 것입니다.

제쳐두고, 두 가지 핵심 사항에 주의를 기울이십시오. 1.     Angular 호출은 디렉티브와 컴포넌트의 메소드를 후크합니다. 2.     스파이 디렉티브는 직접 변경할 수없는 DOM 객체에 대한 통찰력을 제공합니다. 분명히 네이티브 <div> 구현을 손댈 수는 없습니다. 서드파티 컴포넌트도 수정할 수 없습니다. 그러나 지시어를 이용해서 둘 다 볼 수 있습니다.

다음의 부적 절한 스파이 디렉티브는 단순하고, ngOnInit() 및 ngOnDestroy() 훅으로 구성되어 있으며, 주입 된 LoggerService를 통해 부모 디렉티브에게 메시지를 기록합니다.

src/app/spy.directive.ts

// Spy on any element to which it is applied. // Usage: <div mySpy>...</div> @Directive({selector: '[mySpy]'}) export class SpyDirective implements OnInit, OnDestroy {     constructor(private logger: LoggerService) { }     ngOnInit()    { this.logIt(`onInit`); }     ngOnDestroy() { this.logIt(`onDestroy`); }     private logIt(msg: string) {     this.logger.log(`Spy #${nextId++} ${msg}`);   } }

당신은 스파이를 모든 네이티브 엘리먼트 또는 컴포넌트 엘리먼트에 적용 할 수 있으며, 스파이는 해당 엘리먼트와 동시에 초기화되고 폐기됩니다. 다음은 스파이가 반복 된 영웅 <div>에 붙어 있습니다 :

/app/spy.component.html

<div *ngFor="let hero of heroes" mySpy class="heroes">   {{hero}} </div>

각 스파이의 출생과 죽음은 첨부 된 영웅 <div>의 출생과 죽음을 Hook Log의 항목과 함께 표시합니다.

새로운 영웅 <div>에 영웅을 추가하면, 스파이의 ngOnInit()은 해당 이벤트를 기록합니다.

재설정 버튼은 영웅 목록을 지 웁니다. Angular는 DOM에서 영웅 <div> 엘리먼트를 모두 제거하고 동시에 스파이 디렉티브을 소멸시킵니다. 스파이의 ngOnDestroy() 메소드는 디렉티브의 마지막 순간을 보고합니다.

ngOnInit() 및 ngOnDestroy() 메소드는 실제 응용프로그램에서 보다 중요한 역할을 수행합니다.

 

OnInit()

ngOnInit()을 사용하는 주된 두 가지 이유는 다음과 같습니다.

1.     생성 직후 복잡한 초기화를 수행하기 위해

2.     Angular가 입력 프로퍼티를 설정한 다음에 컴포넌트를 설정하기 위해

숙련 된 개발자는 컴포넌트를 저렴하고 안전하게 만들어야한다는 것에 동의합니다.

컴포넌트 생성자에서 데이터를 가져 오지 마십시오. 새로운 컴포넌트가(테스트 중에 생성하거나 표시하기로 결정하기도 전에) 원격 서버에 미리 연결하는 것을 걱정할 필요가 없습니다. 생성자는 초기 로컬 변수를 간단한 값으로 설정하는 것 이상을 수행하면 안됩니다.

ngOnInit()은 컴포넌트가 초기 데이터를 가져 오기에 좋은 장소입니다. 투어 영웅 튜토리얼 가이드에서 방법을 보여줍니다.

또한 디렉티브의 데이터 바인딩 입력 프로퍼티는 생성 이후까지 설정되지 않습니다. 이러한 속성을 기반으로 지시문을 초기화해야 하는 경우에는 문제가 발생합니다. ngOnInit()이 실행될 때 설정됩니다.

ngOnChanges() 메서드는 이러한 프로퍼티에 액세스 할 수있는 첫 번째 기회입니다. Angular는 ngOnInit() 전에 ngOnChanges()를 호출하고 그 이후로 여러 번 호출합니다. 한 번만 ngOnInit()을 호출합니다.

 

OnDestroy()

ngOnDestroy()에 청소 로직을 삽입하십시오. 이 로직은 Angular가 디렉티브를 소멸시키기 전에 실행됩니다.

이것은 응용프로그램의 다른 부분에 컴포넌트가 사라짐을 알리는 시간입니다.

이것은 자동으로 수집되지 않을 쓰레기 자원을 헤재할 수 있는 곳입니다. Observables 및 DOM 이벤트 수신 종료하고, 간격 타이머를 중지합니다. 이 디렉티브가 전역 또는 응용프로그램 서비스에 등록 된 모든 콜백을 등록취소합니다. 당신이 그렇게하지 않으면 메모리 누출의 위험이 있습니다.