Question

我们正在使用Cordova和Angular 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（）触发时，它会设置 status 并将UI更新为“JSONStore is initialized”。在Cordova应用程序上，如果我不使用手动更改检测，它将不会更新UI。例如，请参阅下面我 //如果这不在这里，它将不会更新为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);
            });
        }

我也通过简单的按钮点击来设置变量。除非我手动使用变化检测，否则Cordova中没有任何事情发生。我只是在学习Angular 2，所以对我所做错的任何帮助都非常感谢。

Answer 1

zone.js修补程序XHR对象和其他api，如setInterval，addEventListener，Promise因此在发生某些事情时会通知角度，并触发更改检测本身。

看起来JSONStore正在使用不同的Promise实现（jQuery？），而zone.js没有对其进行修补，因此您必须手动触发更改检测或将回调包装在zone.run中。

Cordova App中的角度2变化检测和区域不同

1 个答案: