執行順序
parentConstructor 父組件的構造函數
childConstructor 子組件的構造函數
parentOnInt 父組件的OnInit方法
parentDoCheck 父組件的DoCheck方法
parentContentInit 父組件的ContentInit方法
parentContentChecked 父組件的ContentChecked方法
childtestb undefined 子組件接收父組件傳遞的屬性testb, 接收的屬性之間的執行先后順序由子組件中@Input的先后順序決定,寫在前面的屬性先接收到
childtesta testb 子組件接收父組件傳遞的屬性testa
childOnChange 子組件的OnChange方法
childOnInt 子組件的OnInit方法
childDoCheck 子組件的DoCheck方法
childContentInit 子組件的ContentInit方法
childContentChecked 子組件的ContentChecked方法
childViewInit 子組件的ViewInit方法
childViewChecked 子組件的ViewChecked方法
parentViewInit 父組件的ViewInit方法
parentViewChecked 父組件的ViewChecked方法
parentDoCheck 父組件的DoCheck方法
parentContentChecked 父組件的ContentChecked方法
childDoCheck 子組件的DoCheck方法
childContentChecked 子組件的ContentChecked方法
childViewChecked 子組件的ViewChecked方法
parentViewChecked 父組件的ViewChecked方法
子組件的內容:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-title',
templateUrl: './title.component.html',
styleUrls: ['./title.component.less']
})
export class TitleComponent implements *OnInit* {
_testa: *any*;
_testb: *any*;
@Input()
set testb(*testb*: *any*) {
*this*._testb = testb;
*console*.log('childtestb', *this*.testa);
}
get testb() {
return *this*._testb;
}
@Input()
set testa(*testa*: *any*) {
*this*._testa = testa;
*console*.log('childtesta', *this*.testb);
}
get testa() {
return *this*._testa;
}
constructor() {
*console*.log('childConstructor');
}
ngOnChanges() {
*console*.log('childOnChange');
}
ngOnInit(): *void* {
*console*.log('childOnInt');
}
ngDoCheck() {
*console*.log('childDoCheck');
}
ngAfterContentInit(): *void* {
*console*.log('childContentInit');
}
ngAfterContentChecked(): *void* {
*console*.log('childContentChecked');
}
ngAfterViewInit(): *void* {
*console*.log('childViewInit');
}
ngAfterViewChecked(): *void* {
*console*.log('childViewChecked');
}
}