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

  }


}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM