Angular中@input 、Constructor 、生命周期函数的执行先后顺序

执行顺序

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');

  }


}
posted @ 2019-09-27 11:21  珍惜你的微笑  阅读(1606)  评论(0编辑  收藏  举报