【技巧】ionic3善用数据变更检查

有时候出现model变更了,但是页面没有更新

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

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

场景一

利用Cordova插件加载本地图片显示在html中,有时等很久才显示,以为是插件的问题,但是调试的时候,发现图像数据很快就返回了,那猜想是显示的问题,同时发现,当页面切换到其它页面再切换回来时,图片很快就显示了,所以,认为是ts的绑定数据更新了,但是视图页面却没有更新,这个时候,ChangeDetectorRef就派上用场了。

首先,在ts文件头部添加:

import { Component, ChangeDetectorRef } from '@angular/core';

然后在构造函数里注入:

constructor(private cd: ChangeDetectorRef)

最终在更新变量后,手动调用代码,强制页面检查刷新即可:

this.cd.detectChanges();

场景二

假如我有一个form表单要在页面上提交,而表单数据是通过绑定来获取的,而有时候出现这种情况:orderParams.test更改了,但是提交的表单数据没有相应更新到,这个时候ChangeDetectorRef又上场了。

……

简单说明

那这个神奇的ChangeDetectorRef是什么来的?它其实有如下几个方法:

class ChangeDetectorRef {
  markForCheck(): void
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}

我不在此重复造车轮多做描述了,有兴趣的查看此文吧:
http://blog.csdn.net/railsbug/article/details/77239509

你可能感兴趣的:(【技巧】ionic3善用数据变更检查)