一个angular组件,他的生命周期是这样的

  • update bound properties for all child components/directives
  • call ngOnInitOnChanges and ngDoCheck lifecycle hooks on all child components/directives
  • update DOM for the current component
  • run change detection for a child component
  • call ngAfterViewInit lifecycle hook for all child components/directives

(点击查看源码)

1,接父节点发来的input参数,并把这时的input参数保存,记为oldInput

2,按ngOnChange,ngOnInit,ngDoCheck的顺序调用自己的生命周期函数

3,如果有子组件,将子组件的input参数下传,并依次调用子组件的ngOnChange,ngOnInit,ngDoCheck参数

4,自身做变化检测,同时更新自己的dom结构,将此时的dom结构保存,记为olddom

5,子组件进行变化检测,同时更新子组件的dom结构

6,子组件调用ngAfterViewInit

7,自身调用ngAfterViewInit

8,如果是开发模式,会进行第2轮循环,重复1-7

9,第2轮循环的1,4步骤如果发现oldInput不等于input或者olddom不等于dom,就会报ExpressionChangedAfterItHasBeenCheckedError错误

如何避免:

1,不要在ngOnChange,ngOnInit,ngDoCheck里面改变父组件下传的input参数

2,不要在ngAfterViewInit里改变父组件或自身的dom结构

3,可以用异步的方式做变更

4,在父组件的ngAfterViewInit最后调用this.cd.detectChanges();(不推荐)

为什么要做这个检测:

是为了保证angular单向数据流的稳定性,数据要保证从父组件流向子组件,如果数据流不是按照从上往下的顺序,就会出现互相依赖的关系,容易造成循环依赖,可能让angular应用出现卡死的状况。

所以如果在开发过程中发现了ExpressionChangedAfterItHasBeenCheckedError的错误,一定要小心排查。

附注:

这篇文章其实是对The Hidden Docs In Angular - ngChina 2019 演讲这个视频前半段的总结。

ExpressionChangedAfterItHasBeenCheckedError详细解释的更多相关文章

  1. .htaccess语法之RewriteCond与RewriteRule指令格式详细解释

    htaccess语法之RewriteCond与RewriteRule指令格式详细解释 (2012-11-09 18:09:08) 转载▼ 标签:  htaccess it 分类: 网络 上文htacc ...

  2. cookie的详细解释

    突然看到网页上中英文切换的效果,不明白怎么弄得查了查 查到了cookie 并且附有详细解释 就copy留作 以后温习 http://blog.csdn.net/xidor/article/detail ...

  3. tar命令的详细解释

    tar命令的详细解释 标签: linuxfileoutputbashinputshell 2010-05-04 12:11 235881人阅读 评论(12) 收藏 举报  分类: linux/unix ...

  4. Linux学习笔记15——GDB 命令详细解释【转】

    GDB 命令详细解释 Linux中包含有一个很有用的调试工具--gdb(GNU Debuger),它可以用来调试C和C++程序,功能不亚于Windows下的许多图形界面的调试工具. 和所有常用的调试工 ...

  5. C语言 - 结构体(struct)比特字段(:) 详细解释

    结构体(struct)比特字段(:) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26722511 结构体(struc ...

  6. 姿势体系结构的详细解释 -- C

    我基本上总结出以下4部分: 1.问题的足迹大小. 2.字节对齐问题. 3.特别保留位0. 4.这种结构被存储在存储器中的位置. #include <stdio.h> #include &l ...

  7. Java - 面向对象(object oriented)计划 详细解释

    面向对象(object oriented)计划 详细解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24058107 程序包括 ...

  8. 设计模式 - 迭代模式(iterator pattern) Java 迭代器(Iterator) 详细解释

    迭代模式(iterator pattern) Java 迭代器(Iterator) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy 參考迭代器模式(ite ...

  9. 设计模式 - 观察者模式(Observer Pattern) 详细解释

    观察者模式(Observer Pattern) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26583157 版权全部 ...

随机推荐

  1. Springcloud及Git线上配置详解

    SpringCloud 这个阶段该如何学? 三层架构 + MVC 框架: Spring IOC AOP SpringBoot,新一代的JavaEE开发标准,自动装配 模块化~ all in one,代 ...

  2. 利用ArcEngine开发地图发布服务,将mxd文档一键发布成wmts,并根据需要对地图进行空间查询,返回客户端geojson

    一直想开发一个软件取代ArcGIS Server,该软件使用ArcEngine开发,以Windows Service形式发布,部署在服务端上,解决wmts地图服务发布和空间查询的问题,经过不断的研究. ...

  3. sublime速查手册

    零.sublime的优势 容易上手 支持多点编辑 包管理:Package Control 速度快 深度可订制,配置文件放github上 sublime-config 快速文件切换 cmd + p 输入 ...

  4. JavaScript数组操作常用方法

    @ 目录 数组基础遍历方法. for for of for in 数组的基础操作方法. push:尾部追加元素 pop:尾部移出元素 unshift:头部追加元素 shift:头部移出元素 splic ...

  5. linux篇-linux LAMP yum版安装

    LAMP(linux.apache.mysql.php),是四个套件的合成,简单讲就是要把php运行在linux上,需要依赖apache和mysql数据库. 1 准备好一个linux系统(centos ...

  6. cefsharp + winform 内嵌网页的触屏输入焦点问题

    原文 现象 我正在使用 cefsharp + winform 建立一个桌面程序用于显示网页.但程序启动后触屏点击网页中的输入框,使用键盘输入,文字输入不进去.win + D 最小化程序后,再恢复窗口才 ...

  7. CabloyJS一站式助力微信、企业微信、钉钉开发 - 钉钉篇

    前言 现在软件开发不仅要面对前端碎片化,还要面对后端碎片化.针对前端碎片化,CabloyJS提供了pc=mobile+pad的跨端自适应方案,参见:自适应布局:pc = mobile + pad 在这 ...

  8. SpringCloud微服务实战——搭建企业级开发框架(四十二):集成分布式任务调度平台XXL-JOB,实现定时任务功能

      定时任务几乎是每个业务系统必不可少的功能,计算到期时间.过期时间等,定时触发某项任务操作.在使用单体应用时,基本使用Spring提供的注解即可实现定时任务,而在使用微服务集群时,这种方式就要考虑添 ...

  9. 初步了解认识正则表达式(Regex)

    如果你感到这篇文章对您有所帮助,那请您给我一个免费的赞吧QWQ! 如果想要深入理解什么是正则表达式,请购买教材<形式语言与自动机>,相信学完它之后一定会让你更加理解正则表达式! 1.你的同 ...

  10. Java 基础常见知识点&面试题总结(中),2022 最新版!| JavaGuide

    你好,我是 Guide.秋招即将到来,我对 JavaGuide 的内容进行了重构完善,公众号同步一下最新更新,希望能够帮助你. 上篇:Java 基础常见知识点&面试题总结(上),2022 最新 ...