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');
    
      }
    
    
    }
    
  • 相关阅读:
    idea 快捷键
    vue.js
    破解idea
    如何进行反向迭代以及如何实现反向迭代?
    如何使用生成器函数实现可迭代对象?
    从一个实际小例子来看python中迭代器的应用
    MySql中常用的内置函数
    linux服务器重启oracle服务。
    oracle里面清除服务器上所有的oracle服务。
    刷机后的环境变量
  • 原文地址:https://www.cnblogs.com/cherishSmile/p/11593676.html
Copyright © 2011-2022 走看看