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');
    
      }
    
    
    }
    
  • 相关阅读:
    苹果常识
    Xcode相关路径
    iOS10 Xcode8问题汇总
    摇一摇
    手机端在线预览文件
    生成纯色色块
    django--没有整理,笔记
    httprunnermanager环境搭建 -----转
    httprunner---->最最基础小白笔记
    Oracle 多表联合删除?--转
  • 原文地址:https://www.cnblogs.com/cherishSmile/p/11593676.html
Copyright © 2011-2022 走看看