Угловое 2 Change Detection и зоны различны в Кордове App

Question

Мы строим приложения с помощью Кордову и угловую 2. У меня есть следующий код:

import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core'; 
    import { Location } from '@angular/common'; 

    declare var WL : any; 

    @Component({ 
     selector: 'app-store', 
     templateUrl: './store.component.html', 
     styleUrls: ['./store.component.css'] 
    }) 

    export class StoreComponent implements OnInit { 
     status: string; 
     document: any; 

     constructor(private _location: Location, private changeDetector: ChangeDetectorRef, 
     private zone: NgZone) { } 

     ngOnInit() { 
     var collectionName = 'people'; 
     this.status = "JSONStore is not yet initialized!"; 
     if(typeof WL !== "undefined" && typeof WL.JSONStore.get(collectionName) !== "undefined") 
       this.status = "JSONStore is initialized!"; 
     } 
     } 
     jsonStoreInit(){ 
       var that = this; 
       var collectionName = 'people'; 

       // Object that defines all the collections. 
       var collections = { 

        // Object that defines the 'people' collection. 
        people : { 

         // Object that defines the Search Fields for the 'people' collection. 
         searchFields : {name: 'string', age: 'integer'} 
        } 
       }; 

       // Optional options object. 
       var options = { }; 

       /* // Optional username, default 'jsonstore'. 
       username : 'carlos', 

       // Optional password, default no password. 
       password : '123', 

       // Optional local key generation flag, default false. 
       localKeyGen : false 
       };*/ 

       WL.JSONStore.init(collections, options).then(function() { 

        // Data to add, you probably want to get 
        // this data from a network call (e.g. MobileFirst Adapter). 
        var data = [{name: 'carlos', age: 10}]; 

        // Optional options for add. 
        var addOptions = { 

         // Mark data as dirty (true = yes, false = no), default true. 
         markDirty: true 
        }; 

        // Get an accessor to the people collection and add data. 
        return WL.JSONStore.get(collectionName).add(data, addOptions); 
       }) 

       .then(function (numberOfDocumentsAdded) { 
        that.status = "JSONStore is initialized!"; 
       }) 

       .fail(function (errorObject) { 
       // Handle failure for any of the previous JSONStore operations (init, add). 
        alert("Error"); 
        console.log(errorObject); 
       }); 
      } 
    } 

На веб-браузере, это прекрасно работает. Когда запускается jsonStoreInit(), он устанавливает статус и обновляет пользовательский интерфейс до «Инициализируется JSONStore». В приложении «Кордова», если я не использую ручное обнаружение изменений, он не будет обновлять пользовательский интерфейс. Например, смотрите ниже, где у меня есть // ЕСЛИ ЭТО НЕ ЗДЕСЬ, ЭТО НЕ ОБНОВЛЕНИЕ В Cordova:

 ngOnInit() { 
      var collectionName = 'people'; 
      this.status = "JSONStore is not yet initialized!"; 
      if(typeof WL !== "undefined" && typeof WL.JSONStore.get(collectionName) !== "undefined") 
       this.status = "JSONStore is initialized!"; 

       //IF THIS ISN'T HERE, IT WILL NOT UPDATE IN CORDOVA 
       this.changeDetector.markForCheck(); 
       this.zone.run(()=> function(){}); 
      } 
     } 

     jsonStoreInit(){ 
      var that = this; 
      var collectionName = 'people'; 

      // Object that defines all the collections. 
      var collections = { 

       // Object that defines the 'people' collection. 
       people : { 

        // Object that defines the Search Fields for the 'people' collection. 
        searchFields : {name: 'string', age: 'integer'} 
       } 
      }; 

      // Optional options object. 
      var options = { }; 

      /* // Optional username, default 'jsonstore'. 
      username : 'carlos', 

      // Optional password, default no password. 
      password : '123', 

      // Optional local key generation flag, default false. 
      localKeyGen : false 
      };*/ 

      WL.JSONStore.init(collections, options).then(function() { 

       // Data to add, you probably want to get 
       // this data from a network call (e.g. MobileFirst Adapter). 
       var data = [{name: 'carlos', age: 10}]; 

       // Optional options for add. 
       var addOptions = { 

        // Mark data as dirty (true = yes, false = no), default true. 
        markDirty: true 
       }; 

       // Get an accessor to the people collection and add data. 
       return WL.JSONStore.get(collectionName).add(data, addOptions); 
      }) 

      .then(function (numberOfDocumentsAdded) { 
       that.status = "JSONStore is initialized!" 

       //IF THIS ISN'T HERE, IT WILL NOT UPDATE IN CORDOVA 
       this.changeDetector.markForCheck(); 
       this.zone.run(()=> function(){}); 
      }) 

      .fail(function (errorObject) { 
      // Handle failure for any of the previous JSONStore operations (init, add). 
       alert("Error"); 
       console.log(errorObject); 
      }); 
     } 

Я также видел это на щелчками кнопки, чтобы установить переменную. Ничего не происходит в Кордове, если я вручную не использую обнаружение изменений. Я просто изучаю Angular 2, поэтому любая помощь в том, что я делаю неправильно, очень ценится.

Answer 1

zone.js пластыри XHR объектов и других APIs как setInterval, addEventListener, Promise так Угловой уведомляются, когда что-то происходит, и это вызывает само обнаружение изменений.

Похоже JSONStore использует другую реализацию Promise (JQuery?), Который не пропатчен zone.js, так что вы должны вызвать обнаружение изменений вручную или завернуть вам обратные вызовы в zone.run.