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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 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
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python中内建模块collections如何使用
2020/05/27 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
参观考察邀请函范文
2014/01/29 职场文书
活动总结范文
2014/08/30 职场文书
个人租房协议书
2014/11/28 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书