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 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
js 闭包深入理解与实例分析
Mar 19 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
使用php4加速网络传输
2006/10/09 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python WEB应用部署的实现方法
2019/01/02 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
大学校庆邀请函
2014/01/11 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
家长通知书教师评语
2014/04/17 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书