angular 4 생명주기 갈고리

이해 하 다.
Angular 는 생명 주기 갈 고 리 를 제공 하여 이 중요 한 생명 시간 을 노출 시 켜 우리 에 게 그들 이 발생 할 때 행동 하 는 능력 을 부여 한다.갈고리 함 수 를 적당 한 때 에 적당 한 일 을 하 는 것 으로 이해 할 수 있다.
갈고리 함수
ng4 는 주로 8 개의 갈고리 함 수 를 제공 합 니 다.
1、ngOnchanges
@input 속성(입력 속성)이 변경 되면 호출 됩 니 다.이 속성 이 아니면 호출 되 지 않 습 니 다.
속성 을 대상 으로 입력 할 때 대상 의 속성 값 이 변 할 때 호출 되 지 않 고 대상 의 인용 변화 가 발생 할 때 촉발 합 니 다.
ngOnInit 호출 보다 먼저.
2、ngOnInit
한 번 만 실행 하면 dom 작업 을 넣 을 수 있 습 니 다.(맨 날
3、NgDocheck
변경 검사 가 발생 할 때마다 호출 됩 니 다.
ngDoCheck()은 Angular 의 변경 검사 시스템 입 니 다.zone.js 에서 이 루어 집 니 다.Angular 의 한 구성 요소 에 비동기 사건 이 발생 하면 전체 구성 요소 트 리 를 검사 합 니 다.구성 요소 속성의 변화 나 페이지 의 변 화 를 동기 화 할 수 있 도록 합 니 다.따라서 ngDoCheck()의 트리거 가 상당히 빈번 합 니 다.또한 예상 할 수 없 는 것 입 니 다.아마도 우리 가 페이지 에 있 는 무의식 적 인 조작 은 몇 개,심지어 몇 십 개의 ngDoCheck()수명 주기 갈 고 리 를 촉발 할 것 입 니 다.
4、ngAfterContentInit
구성 요소 내용 초기 화 후 호출
5、ngAfterContentChecked
내용 투영:부모 구성 요소 가 하위 탭 사이 에 쓰 인 내용 은 하위 템 플 릿 의 ng-content 에 렌 더 링 됩 니 다.vue 와 같은 slot 입 니 다.
구성 요소 및 하위 구성 요소 가 내용 을 검사 할 때마다 호출 됩 니 다.
부자 구성 요소 에 이 갈고리 가 있 을 때 부모 구성 요소 가 먼저 실 행 됩 니 다.
6、ngAfterViewInt
구성 요소 에 해당 하 는 보기 초기 화 후 호출
7、ngAfterViewChecked
구성 요소 및 하위 구성 요소 가 보 기 를 검사 할 때마다 호출 됩 니 다.
부자 구성 요소 에 이 갈고리 가 있 을 때 하위 구성 요소 가 먼저 실 행 됩 니 다.
ngafterViewChecked 와 ngafterViewInt 에 서 는 바 인 딩 된 속성(@input 속성)을 수정 할 수 없습니다.그렇지 않 으 면 이상 을 던 집 니 다.
8、ngOnDestory
소각
3.실행 순서
부모 구성 요소:
모듈 템 플 릿

<div class="panel-body">
 <input type="text" [(ngModel)]="name">
 {{name}}
  <son [name]="name"></son>
</div>

구성 요소

@Component({
 selector: 'father',
 templateUrl: './father.component.html',
 styleUrls: ['./father.component.scss']
})
export class FatherComponent implements OnInit {
 public name:string;
 constructor() { }
 ngOnInit() {
 console.log("   ngOninit");
 }
 ngOnchanges(){
 console.log("   ngonchanges");
 }
 ngDoCheck (){
 console.log("   ngDocheck")
 }
 ngAfterContentInit(){
 console.log("   ngAfterContentInit")
 }
 ngAfterContentChecked(){
 console.log("   ngAfterContentChecked")
 }
 ngAfterViewInit(){
 console.log("   ngAfterViewInit")
 }
 ngAfterViewChecked(){
 console.log("   ngAfterViewChecked")
 }
}

하위 구성 요소

@Component({
 selector: 'son',
 templateUrl: './son.component.html',
 styleUrls: ['./son.component.scss']
})
export class SonComponent implements OnInit {
 @Input() name:string;
 constructor() { }

 ngOnInit() {
 console.log("   ngOninit");
 }
 ngOnChanges (){
 console.log("   ngonchanges");
 }
 ngDoCheck (){
 console.log("   ngDocheck")
 }
 ngAfterContentInit(){
 console.log("   ngAfterContentInit")
 }
 ngAfterContentChecked(){
 console.log("   ngAfterContentChecked")
 }
 ngAfterViewInit(){
 console.log("   ngAfterViewInit")
 }
 ngAfterViewChecked(){
 console.log("   ngAfterViewChecked")
 }
 
}

인쇄 결과 보기:

부모 구성 요소 의 input 에 내용 을 입력 하면 다음 결 과 를 인쇄 합 니 다.

내용 투영 을 사용 할 때 만 ngAfter Conent Checked 를 호출 한 다 는 사람 을 보 았 습 니 다.위의 코드 는 ng-content 를 사용 하지 않 은 것 이 분명 합 니 다.이 ngAfter Conent Checked 를 어떻게 설명해 야 할 지 모 르 겠 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.