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');
    
      }
    
    
    }
    
  • 相关阅读:
    GIT配置及用法
    Web前端深思
    SPA解释:单页应用程序
    对 Sea.js 进行配置(一) seajs.config
    前端开发知识体系技能点【根据自我学习顺序】
    App性能提升方法
    浅谈Bootstrap自适应功能在Web开发中的应用
    《写给大家看的设计书》 读书笔记(三)
    《写给大家看的设计书》读书笔记(一)
    《写给大家看的设计书》读书笔记(二)
  • 原文地址:https://www.cnblogs.com/cherishSmile/p/11593676.html
Copyright © 2011-2022 走看看