问题描述
我们正在使用Cordova和Angular 2构建应用程序.我有以下代码:
We are building an application using Cordova and Angular 2. I have the following code:
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()触发时，它会设置状态并将UI更新为初始化JSONStore".在Cordova应用程序上，如果我不使用手动更改检测，它将不会更新UI.例如，请参见下面的我的 //如果不在此处，则不会在CORDOVA中更新 :
On a web browser, this works great. When jsonStoreInit() fires, it sets status and updates the UI to "JSONStore is initialized". On the Cordova app, if I don't utilize manual change detection, it will not update the UI. For example, see below where I have //IF THIS ISN'T HERE, IT WILL NOT UPDATE IN 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，因此非常感谢您对我做错的事情的任何帮助.
I'm also seeing this on simple button clicks to set a variable. Nothing happens in Cordova unless I manually use change detection. I am just learning Angular 2, so any help on what I'm doing wrong is greatly appreciated.
推荐答案
zone.js修补XHR对象和其他API，例如setInterval，addEventListener，Promise，因此在发生某些情况时会通知角度并触发更改检测本身.
zone.js patches XHR object and other apis like setInterval, addEventListener, Promise so angular is notified when something happens and it triggers change detection itself.
JSONStore似乎正在使用未由zone.js修补的其他Promise实现(jQuery?)，因此您必须手动触发更改检测或将回调包装在zone.run中.
It looks like JSONStore is using different Promise implementation (jQuery?) which is not patched by zone.js, so you have to trigger change detection manually or wrap you callbacks in zone.run.
这篇关于科尔多瓦应用程序中的Angular 2变化检测和区域不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！