Angular2学习教程之ng中变更检测问题详解


Posted in Javascript onMay 28, 2017

开发中遇到的问题

在开发中遇到一个这样的问题,代码不便透露,这里用简单的例子还原一下问题所在:

有三个组件,第一个是用来展示Todo列表的组件TodoComponent,Todo是个类,包含id和name属性。

@Component({
 selector: 'todo-list',
 template: `
  <p *ngFor='let item of todos'>{{ item.name }}</p>
 `,
})
export class TodoComponent{
 @Input() todos: Todo[];

 public getTodos():Todo[]{
  return this.todos;
 }
}

第二个组件同样是一个Todo列表展示组件TodoDataComponent ,不同的是该组件需要一个TodoComponent类型的输入,并从TodoComponent组件中获得需要展示的Todo数据。

@Component({
 selector: 'app-todo-data',
 template: `<p *ngFor='let item of todos'>{{ item.name }}</p>
  <button (click)='getData()'>get data</button>`,
 styleUrls: ['./todo-data.component.css'],
 inputs: ['todoComponent'],
})
export class TodoDataComponent implements OnInit {
 todoComponent: TodoComponent;
 todos: Todo[]
 constructor() { }
 ngOnInit() {
 }
 getData(){
  this.todos=this.todoComponent.getTodos();
 }
}

最后一个是应用的根组件,根组件根据loading值来确定是否加载TodoComponent组件,并展示TodoDataComponent 组件。

//app.component.htm
<div>
 <div *ngIf='loading'>
  <todo-list [todos]='todos'></todo-list>
  <button (click)='changeall()'>next</button>
 </div>
</div>
<div>
 <app-todo-data [todoComponent]='todoComponent'></app-todo-data>
</div>

//app.component.ts
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
 todos: Todo[];
 @ViewChild(TodoComponent)
 todoComponent: TodoComponent;
 loading: boolean = true;
 constructor(private todoService:TodoService){
  super(true);
 }
 ngOnInit(){
  this.todoService.todos.subscribe(data => {this.todos=data});
  this.todoService.load(0, 3);
 }
 changeall(){
  this.todoService.load(3, 3);
 }
}

这样问题就来了,TodoComponent 组件是否在页面上展示是不确定的,在上面的例子中根组件最开始没有渲染TodoComponent组件,最后根据loading的值将TodoComponent渲染出来。而TodoDataComponent 组件的显示又需要一个TodoComponent 进行初始化(跟组件通过@ViewChild(TodoComponent)获得),这样造成在开发模式下出现以下错误:
template:9:16 caused by: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'.

该错误仅在开发模式下会报告出来的,解决掉总是更好的选择,防止在生产环境下出现问题。

问题的原因及解决办法

这个问题是ng2中的变更检测策略造成的,ng2并没有智能到一有数据变更就能自动检测到的,执行变更检测的一些情况有:组件中的输入发生变化、组件中有事件响应、setTimeOut函数等。

这样在上面的小例子中, @ViewChild(TodoComponent)todoComponent: TodoComponent;从undefined到[object Object],而并没有触发ng的变更检测。

解决办法也很简单,ng支持手动触发变更检测,只要在适当的位置,调用变更检测即可。
在上面的例子中,解决办法为:

从@angular/core引入AfterViewInit, ChangeDetectorRef。注入ChangeDetectorRef对象,并在声明周期钩子ngAfterViewInit中调用变更

constructor(private todoService:TodoService, private cdr: ChangeDetectorRef){}

ngAfterViewInit(){
 this.cdr.detectChanges();
}

ChangeDetectorRef

用来处理ng变更的类,可以使用它来进行完全的手动变更检测,主要有一下方法:

1.markForCheck()标记为需要进行变更检测,官方给的一下例子,setInterval不会触发变更检测,因此模板上的numberOfTicks 并不会发生变化。

setInterval(() => {
this.numberOfTicks ++
 // the following is required, otherwise the view will not be updated
 this.ref.markForCheck();
}, 1000);

2.detach()从变更检测树上分离,即该组件不会进行自动的变更检测,变更需要手动进行,使用detectChanges函数。

3.detectChanges()手动检测变更,当变更检测代价较大时,可以设置为定时进行表更检测

ref.detach();
setInterval(() => {
 this.ref.detectChanges();
}, 5000);

4.checkNoChanges()进行变更检测,有变更时抛出异常

5.reattach()detach()方法的作用相反

其他一些变更检测知识

angular2中的每一个组件都关联到一个变更检测器,ChangeDetectorRef可以用来控制变更检测器进行检测。
浏览器的以下行为可以出发检测器进行检测:

1.所有浏览器事件

2.setTimeout()setInterval()

3.Ajax请求

OnPush变更检测模式

组件默认使用的是Default变更检测模式,只要组件的输入发生变化时,就会触发检测器的执行。除Default模式外,还有一种OnPush变更检测模式,使用该模式首先需要在组件声明修饰符中添加

@Component({
 selector: 'todo-list',
 changeDetection: ChangeDetectionStrategy.OnPush,
})

声明为OnPush变更检测模式意味着当组件输入发生变化时,不一定会触发变更检测器,只有当该输入的引用发生变化时,检测器才会触发。例如在一个数组中某个下标的值发生变化时,检测器不会触发,视图不会更新,只有该数组引用发生变化时,视图才会更新。当然浏览器事件、observable发出的事件等还是会触发检测器的。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家三水点靠木的支持。

Javascript 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
AngularJS入门之动画
Jul 27 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
Angular2使用jQuery的方法教程
May 28 #jQuery
Angular.js实现动态加载组件详解
May 28 #Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 #Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 #Javascript
Angular2入门教程之模块和组件详解
May 28 #Javascript
关于Angular2 + node接口调试的解决方案
May 28 #Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 #Javascript
You might like
生成静态页面的PHP类
2006/07/15 PHP
PHP常用代码
2006/11/23 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
列车长先进事迹材料
2014/01/25 职场文书
校园文化建设方案
2014/02/03 职场文书
化学教育专业自荐信
2014/07/04 职场文书
婚宴新娘致辞
2015/07/28 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫