执行顺序
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');
}
}
查看更多关于Angular中@input 、Constructor 、生命周期函数的执行先后顺序的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did222851