【技巧】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又上场了。

<form id="frmOnline" action="http://test/main.html" method="post">
    <input type="hidden" readonly="true" name="c_id" value="{{orderParams.test}}">
……

简单说明

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

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

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