angular 2 구성 요소 의 생명주기 갈고리

본 고 는 angular 2 구성 요소 의 생명주기 갈 고 리 를 소개 하고 여러분 께 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
생명주기 집행 의 선후 순서에 따라 Angular 생명주기 인 터 페 이 스 는 다음 과 같다.
명칭.
타 이 밍
인터페이스
범위.
ngOnChanges
바 인 딩 된 입력 속성의 값 이 변 경 될 때 호출,첫 번 째 호출 은 반드시 발생 합 니 다. ngOnInit 전에
OnChanges
명령 과 구성 요소
ngOnInit
1 라운드 에서 ngOnChanges 완성 후 호출. ( 번역 주:즉,모든 입력 속성의 값 이 한 번 촉발 되 었 을 때 ngOn Changes 이후 에 호출 됩 니 다. ngOnInit ，이 때 모든 입력 속성 에 정확 한 초기 귀속 값 이 있 습 니 다 )
OnInit
명령 과 구성 요소
ngDoCheck
각각 Angular 검사 주기 변경 중 호출.
DoCheck
명령 과 구성 요소
ngAfterContentInit
구성 요소 에 내용 을 투영 한 후 호출 합 니 다.
AfterContentInit
구성 요소
ngAfterContentChecked
투영 구성 요소 의 내용 변경 검 사 를 완료 할 때마다 호출 됩 니 다.
AfterContentChecked
구성 요소
ngAfterViewInit
구성 요소 보기 와 하위 보 기 를 초기 화 한 후 호출 합 니 다.
after initializing the component's views and child views.
AfterViewInit
구성 요소
ngAfterViewChecked
구성 요소 보기 와 하위 보기 의 변경 검 사 를 마 칠 때마다 호출 합 니 다.
AfterViewChecked
구성 요소
ngOnDestroy
...해 야 한다 Angular 매번 소각 명령 /구성 요소 이전 호출.
OnDestroy
명령 과 구성 요소
라 이 프 사이클 순서 약자
Angular 가 구조 함 수 를 통 해 구성 요소/명령 을 만 들 때 이 수명 주기 갈고리 방법 을 호출 하 는 순 서 는 다음 과 같 습 니 다.

ngOnChanges:ngOnInit 전에 데이터 바 인 딩 입력 속성의 값 이 변 할 때..

ngOnInit:첫 번 째 ngOnChanges 이후..

ngDoCheck:Angular 변화 검 측 시.

ngAfter ContentInit:외부 내용 을 구성 요소 에 넣 은 후..

ngAfter ContentChecked:구성 요소 에 있 는 외부 내용 을 검사 할 때마다..

ngAfterViewInit:구성 요소 보기 와 하위 보 기 를 초기 화 한 후..

ngAfterView Checked:여동생 구성 요소 보기 와 하위 보기 검사 후..

ngOn Destroy:Angular 가 구성 요소/명령 을 소각 하기 전에..

이외에 도 일부 구성 요소 들 은 자신의 생명주기 갈고리 도 제공한다.예 를 들 어 router 에는 router OnActivate 가 있 습 니 다.

라 이 프 사이클 순 서 를 테스트 하 는 코드

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
 selector: 'panel',
 inputs: ['title', 'caption'],
 template: '<ng-content></ng-content>'
})
class Panel {
 //            （           ngOnInit  。）
 ngOnChanges(changes) {
  console.log('On changes', changes);
 }
 //        （     ngOnChanges       。 (   ：                     ngOnChanges        ngOnInit ，                      )）
 ngOnInit() {
  console.log('Initialized');
  console.warn('OnChanges DoCheck        ，  ！。      ');
 }
 //            
 ngDoCheck() {
  console.log('Do check');
 }
 //       
 ngOnDestroy() {
  console.log('Destroy');
 }
 //   -  -      PS：   ContentChild  Contentchildren
 ngAfterContentInit() {
  console.log('After content init');
 }
 //          
 ngAfterContentChecked() {
  console.log('After content checked');
 }
 //           PS：   ViewChild  ViewChildren
 ngAfterViewInit() {
  console.log('After view init');
 }
 //            
 ngAfterViewChecked() {
  console.log('After view checked');
 }
}

@Component({
 selector: 'app',
 template: `
  <button (click)="toggle()">Toggle</button>
  <div *ngIf="counter % 2 == 0">
   <panel caption="Sample caption" title="Sample">Hello world!</panel>
  </div>
 `,
 directives: [Panel]
})
class App {
 counter: number = 0;
 toggle() {
  this.counter += 1;
 }
}

bootstrap(App);

출력 결과

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.