ExpressionChangedAfterItHasBeenCheckedError详细解释
一个angular组件,他的生命周期是这样的
- update bound properties for all child components/directives
- call
ngOnInit
,OnChanges
andngDoCheck
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详细解释的更多相关文章
- .htaccess语法之RewriteCond与RewriteRule指令格式详细解释
htaccess语法之RewriteCond与RewriteRule指令格式详细解释 (2012-11-09 18:09:08) 转载▼ 标签: htaccess it 分类: 网络 上文htacc ...
- cookie的详细解释
突然看到网页上中英文切换的效果,不明白怎么弄得查了查 查到了cookie 并且附有详细解释 就copy留作 以后温习 http://blog.csdn.net/xidor/article/detail ...
- tar命令的详细解释
tar命令的详细解释 标签: linuxfileoutputbashinputshell 2010-05-04 12:11 235881人阅读 评论(12) 收藏 举报 分类: linux/unix ...
- Linux学习笔记15——GDB 命令详细解释【转】
GDB 命令详细解释 Linux中包含有一个很有用的调试工具--gdb(GNU Debuger),它可以用来调试C和C++程序,功能不亚于Windows下的许多图形界面的调试工具. 和所有常用的调试工 ...
- C语言 - 结构体(struct)比特字段(:) 详细解释
结构体(struct)比特字段(:) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26722511 结构体(struc ...
- 姿势体系结构的详细解释 -- C
我基本上总结出以下4部分: 1.问题的足迹大小. 2.字节对齐问题. 3.特别保留位0. 4.这种结构被存储在存储器中的位置. #include <stdio.h> #include &l ...
- Java - 面向对象(object oriented)计划 详细解释
面向对象(object oriented)计划 详细解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24058107 程序包括 ...
- 设计模式 - 迭代模式(iterator pattern) Java 迭代器(Iterator) 详细解释
迭代模式(iterator pattern) Java 迭代器(Iterator) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy 參考迭代器模式(ite ...
- 设计模式 - 观察者模式(Observer Pattern) 详细解释
观察者模式(Observer Pattern) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26583157 版权全部 ...
随机推荐
- Springcloud及Git线上配置详解
SpringCloud 这个阶段该如何学? 三层架构 + MVC 框架: Spring IOC AOP SpringBoot,新一代的JavaEE开发标准,自动装配 模块化~ all in one,代 ...
- 利用ArcEngine开发地图发布服务,将mxd文档一键发布成wmts,并根据需要对地图进行空间查询,返回客户端geojson
一直想开发一个软件取代ArcGIS Server,该软件使用ArcEngine开发,以Windows Service形式发布,部署在服务端上,解决wmts地图服务发布和空间查询的问题,经过不断的研究. ...
- sublime速查手册
零.sublime的优势 容易上手 支持多点编辑 包管理:Package Control 速度快 深度可订制,配置文件放github上 sublime-config 快速文件切换 cmd + p 输入 ...
- JavaScript数组操作常用方法
@ 目录 数组基础遍历方法. for for of for in 数组的基础操作方法. push:尾部追加元素 pop:尾部移出元素 unshift:头部追加元素 shift:头部移出元素 splic ...
- linux篇-linux LAMP yum版安装
LAMP(linux.apache.mysql.php),是四个套件的合成,简单讲就是要把php运行在linux上,需要依赖apache和mysql数据库. 1 准备好一个linux系统(centos ...
- cefsharp + winform 内嵌网页的触屏输入焦点问题
原文 现象 我正在使用 cefsharp + winform 建立一个桌面程序用于显示网页.但程序启动后触屏点击网页中的输入框,使用键盘输入,文字输入不进去.win + D 最小化程序后,再恢复窗口才 ...
- CabloyJS一站式助力微信、企业微信、钉钉开发 - 钉钉篇
前言 现在软件开发不仅要面对前端碎片化,还要面对后端碎片化.针对前端碎片化,CabloyJS提供了pc=mobile+pad的跨端自适应方案,参见:自适应布局:pc = mobile + pad 在这 ...
- SpringCloud微服务实战——搭建企业级开发框架(四十二):集成分布式任务调度平台XXL-JOB,实现定时任务功能
定时任务几乎是每个业务系统必不可少的功能,计算到期时间.过期时间等,定时触发某项任务操作.在使用单体应用时,基本使用Spring提供的注解即可实现定时任务,而在使用微服务集群时,这种方式就要考虑添 ...
- 初步了解认识正则表达式(Regex)
如果你感到这篇文章对您有所帮助,那请您给我一个免费的赞吧QWQ! 如果想要深入理解什么是正则表达式,请购买教材<形式语言与自动机>,相信学完它之后一定会让你更加理解正则表达式! 1.你的同 ...
- Java 基础常见知识点&面试题总结(中),2022 最新版!| JavaGuide
你好,我是 Guide.秋招即将到来,我对 JavaGuide 的内容进行了重构完善,公众号同步一下最新更新,希望能够帮助你. 上篇:Java 基础常见知识点&面试题总结(上),2022 最新 ...