• 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');
    
      }
    
    
    }
    
  • 相关阅读:
    高斯核函数的代码体现
    程序编译
    DoH
    随笔1
    获取节点值的方式
    DOM解析XML
    URLConnection发送请求,并接收数据
    myeclipse编译后的jsp文件存放位置
    各种中文乱码
    各种提交的区别
  • 原文地址:https://www.cnblogs.com/cherishSmile/p/11593676.html
Copyright © 2020-2023  润新知