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

라이프 사이클의 예

라이브 예제/다운로드 예제는 루트 AppComponent의 제어하에 컴포넌트로 제공되는 일련의 연습을 통해 작동중인 라이프 사이클 후크를 보여줍니다.

 

이들은 공통 패턴을 따릅니다: 부모 컴포넌트는 라이프 사이클 후크 방법 중 하나 이상을 보여주는 자식 컴포넌트의 테스트 장비로 사용됩니다.

다음은 각 실습에 대한 간단한 설명입니다.

컴포넌트	설명
Peek-a-boo	모든 라이프사이클 후크를 보여줍니다. 각 후크 메소드는 스크린상에 로그를 기록합니다.
Spy	디렉티브에도 라이프사이클 후크가 있습니다. SpyDirective는 ngOnInit 및 ngOnDestroy 훅을 사용하여 스파이가 작성된 엘리먼트가 작성 또는 삭제 될 때 기록 할 수 있습니다. 이 예에서는 SpyDirective를 부모 SpyComponent에서 관리하는 영웅 리피터의 ngFor안의 <div>에 적용합니다.
OnChanges	컴포넌트 입력 프로퍼티 중 하나가 변경 될 때마다 Angular가 ngOnChanges() 후크를 changes 객체와 호출하는 방법을 보여줍니다. changes 객체를 해석하는 방법을 보여줍니다.
DoCheck	사용자 정의 변경 감지로 ngDoCheck() 메소드를 구현합니다. Angular가 이 후크를 얼마나 자주 호출하는지 보고 변경 내용을 로그에 기록합니다.
AfterView	Angular가 의미하고자 하는 것을 뷰에 보여줍니다. ngAfterViewInit 및 ngAfterViewChecked 후크를 설명합니다.
AfterContent	외부 콘텐츠를 컴포넌트에 투사하는 방법과 투영 된 콘텐츠를 컴포넌트의 자식 뷰와 구별하는 방법을 보여줍니다. ngAfterContentInit 및 ngAfterContentChecked 후크를 설명합니다.
Counter	자체 후크가있는 컴포넌트와 디렉티브의 조합을 각각 보여줍니다. 이 예제에서 CounterComponent는 부모 컴포넌트가 입력 카운터 속성을 증가시킬 때마다 변경 사항을 ngOnChanges를 통해 기록합니다. 한편 앞의 예제에서 생성 된 SpyDirective는 CounterComponent 로그에 적용되어 로그 항목이 생성 및 소멸되는 것을 감시합니다.

이 페이지의 나머지 부분에서는 선택한 연습 문제를 자세히 설명합니다.

 

Peek-a-boo : 모든 후크

PeekABooComponent는 컴포넌트에 있는 모든 후크를 보여줍니다.

이처럼 모든 인터페이스를 구현하는 경우는 거의 없습니다. peek-a-boo는 Angular가 예상 된 순서로 후크를 호출하는 방법을 보여주기 위해 존재합니다.

이 스냅 샷은 사용자가 Create... 버튼을 클릭 한 다음 Delete... 버튼을 클릭 한 후 로그 상태를 나타냅니다.

일련의 로그 메시지는 OnChanges, OnInit, DoCheck(3x), AfterContentInit, AfterContentChecked(3x), AfterViewInit, AfterViewChecked(3x) 및 OnDestroy와 같이 지정 된 후크 호출 순서를 따릅니다.

생성자는 앵귤러 후크 그 자체가 아닙니다. 로그는 입력 프로퍼티 (이 경우 name 프로퍼티)에 생성시 할당 된 값이 없음을 확인합니다.

사용자가 Update Hero 버튼을 클릭했다면 로그에는 다른 OnChanges와 DoCheck, AfterContentChecked 및 AfterViewChecked의 세 쌍이 표시됩니다. 분명히이 3개의 후크는 자주 발생합니다. 로직을 가능한 한 적게 유지하십시오!

다음 예제는 후크 세부 사항에 초점을 맞 춥니다.