Angular 4 變更檢測機制 ChangeDetectorRef 使用方法

1、在angular 2中，回調函數的返回結果，不會自動更新視圖層的顯示，可以用 ChangeDetectorRef 來驅動angular更新視圖。

 

import {ChangeDetectorRef} from "angular2/core";  //引入ChangeDetectorRef定義
constructor(public changeDetectorRef:ChangeDetectorRef) {      //注入當前組件的ChangeDetectore
  this.cd = cd;
  this.records = [];
}
barcodeScanner() {
  var self = this;
  cordova.plugins.barcodeScanner.scan(function (result) {
    if (!result.cancelled) {
      self.records.unshift(result);      
      alert(self.records.length);              
      self.changeDetectorRef.markForCheck();     // 通知框架進行變化檢查/Change Detection
    }
  }, function (error) {
    alert("發生了一個錯誤：" + error);
  });
}