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 版权全部 ...
随机推荐
- 【DIY】【CSAPP-LAB】深入理解计算机系统--datalab笔记
title: 前言 <深入理解计算机系统>一书是入门计算机系统的极好选择,从其第三版的豆瓣评分9.8分可见一斑.该书的起源是卡耐基梅龙大学 计算机系统入门课(Introduction to ...
- zabbix 1.1
1.zabbix监控平台 2.zabbix的三部分组件: Zabbix server 是 Zabbix软件的核心组件,agent 向其报告可用性.系统完整性信息和统计信息.server也是存 ...
- Redis集群高频问答,连夜肝出来了
Redis 集群方案 Redis集群方案应该怎么做?都有哪些方案? 使用codis方案:目前用的多的集群方案,基本和twemproxy一致的效果,但它支持在节点数量改变情况下,旧节点数据可恢复到新h ...
- 好客租房22-react组件的两种创建方式(类组件)
2.2使用类创建组件 类组件:使用ES6的class创建的组件 约定1:类组件必须以大写字母开头 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 约定3:组件必 ...
- Vue路由的安装
1.在Vue ui中插件中找到添加vue-router 2.安装以后,项目中的会自动完成配置. 3.在store中的index.js配置路由页面以及路径.
- Random 中的Seed
C#中使用随机数 看下例 当Random的种子是0时 生成的随机数列表是一样的 也就是说当seed 一样时 审查的随机数时一样的 Random的无参实例默认 种子 时当前时间 如果要确保生成的随机数不 ...
- 声学感知刻度(mel scale、Bark scale、ERB)与声学特征提取(MFCC、BFCC、GFCC)
梅尔刻度 梅尔刻度(Mel scale)是一种由听众判断不同频率 音高(pitch)彼此相等的感知刻度,表示人耳对等距音高(pitch)变化的感知.mel 刻度和正常频率(Hz)之间的参考点是将1 k ...
- Clash 规则的写法
这篇博文是针对 CFW 写的. 最近尝试从 v2 转向使用 Clash.基于一个简单的需求:用 Spotify 听专的时候用代理,用 AM 听专的时候直连,我参考了以下完成了我的规则: CFW 官网的 ...
- 云开发中的战斗机 Laf,让你像写博客一样写代码
各位云原生搬砖师 and PPT 架构师,你们有没有想过像写文章一样方便地写代码呢? 怎样才能像写文章一样写代码? 理想的需求应该是可以在线编写.调试函数,不用重启服务,随时随地在 Web 上查看函数 ...
- 从单例谈double-check必要性,多种单例各取所需
theme: fancy 前言 前面铺掉了那么多都是在讲原则,讲图例.很多同学可能都觉得和设计模式不是很搭边.虽说设计模式也是理论的东西,但是设计原则可能对我们理解而言更加的抽象.不过好在原则东西不是 ...