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 仿关机效果的图片层
Dec 26 Javascript
js 操作select相关方法函数
Dec 06 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
AngularJS表单基本操作
Jan 09 Javascript
vue slots 组件的组合/分发实例
Sep 06 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 在线打包_支持子目录
2008/06/28 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
关于js中for in的缺陷浅析
2013/12/02 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
详解Python爬虫的基本写法
2016/01/08 Python
python编程使用协程并发的优缺点
2018/09/20 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
污水厂厂长岗位职责
2014/01/04 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
学校教师安全责任书
2014/07/23 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
2014年检验科工作总结
2014/11/22 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
员工聘用合同范本
2015/09/21 职场文书
mysql数据库如何转移到oracle
2022/12/24 MySQL