zoukankan      html  css  js  c++  java
  • 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');
    
      }
    
    
    }
    
  • 相关阅读:
    js array 排序
    element 右键菜单
    Element ui tree 搜索
    threejs CameraHelper 查看照相机的观察范围
    android 错误解决
    数据结构学习--数组
    js 遍历树的层级关系的实现
    一篇文章理清WebGL绘制流程
    最基础的CSS面试题
    display:flex;多行多列布局学习
  • 原文地址:https://www.cnblogs.com/cherishSmile/p/11593676.html
Copyright © 2011-2022 走看看