使用Angular ChangeDetectorRef 刷新当前页面

修改了本页相关的后台数据后，希望刷新当前页面，以便显示最新的数据集。网上关于Angular如何刷新页面的方法，要么比较复杂，要么已经失效。最简单的方法虽然是使用JavaScript 内置的location.reload()，但是这种方法会导致浏览器刷新本页面，视觉效果很不好，不符合SPA模式。

经实践，可以采用Angular的内置类ChangeDetectorRef的方法detectChanges()，其功能是手动启动本页面的视图组件检查。可以将本页的数据初始化指令汇编到一个函数loadData中，调用loadData，再调用ChangeDetectorRef的方法detectChanges()，Angular就会检查视图变化并更新显示界面，其视觉效果比location.reload()好太多了。

具体方法如下：

//导入OnInit  和 ChangeDetectorRef
import { ... ,OnInit, ChangeDetectorRef } from '@angular/core';

export class XXX implements OnInit {
     constructor(... , 
          private cdref: ChangeDetectorRef) {      
     }
     ngOnInit() {
          ...
          loadData();
     }

     //从后端读取数据
     loadData() {
         ... 
         ...
     }

     yyy() {
         ...
         this.loadData();
         this.cdref.detectChanges();
     }

}