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的并行运算实现代码
Nov 19 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
js利用iframe实现选项卡效果
Aug 09 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHPThumb图片处理实例
2014/05/03 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
python删除字符串中指定字符的方法
2018/08/13 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
高分子材料与工程专业个人求职信
2013/12/15 职场文书
群众路线领导对照材料
2014/08/23 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
客服专员岗位职责
2015/02/10 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android