Angular2系以上で、$scope.apply()っぽいことしたい


APIでデータ取ってきた後にデータバインドで画面を反映させたかったんだけど、うまく動きませんでした。
Angular1系だったら$scope.apply()で強引にやってたんだけど、それを2系以上でやるのってどうやるんやろか。

と思って見たら、ChangeDetectorRefというものがある模様。
組み込んでみたら、ちゃんと動きました。やったね!

動けばいいので、しくみとかはよくわかってないです。
たぶん変更を検知してDOMを更新してくれてるんだと思います。

search.ts
 // ChangeDetectorRefをインポートするらしい
 import { Component, ChangeDetectorRef } from '@angular/core';

 @Component({
   selector: 'page-search',
   templateUrl: 'search.html'
 })
 export class SearchPage {
   ...
   constructor(public navCtrl: NavController, private chRef: ChangeDetectorRef) {
     ...
   }
   // 検索を行う
   search(searchWords) {
     searchAPI.getResult(searchWords).then(
       (data) => {
        this.results = data;
         // 変更検知して、DOMを更新してくれてるんだと思う
         this.chRef.detectChanges();
       }
     );
   }
 }

LifeCycleというものもあるそうです。
これはAngular2系なのかな。

参考
https://stackoverflow.com/questions/33174146/angular-2-0-equivalent-to-scope-apply