从PhoneGap的通知对话框时改变角2项不更新 [英] Angular 2 items don't update when changed from phonegap notification dialog
问题描述
我建设有angular2的PhoneGap的应用程序。
我想显示一个确认对话框，并在成功回调以更新angular2视图元素。当我这样做没有任何反应的时候了，但如果我在页面上更新其他模型（什么是具有角挂）我的更新是更新。
I am building an phonegap app with angular2. I want to show a confirmation dialog and in success callback to update elements from angular2 view. When I do this nothing happens right away, but if I update other model on the page (what is linked with angular) my update is updated.
有关确认对话框我用PhoneGap的插件：科尔多瓦 - 插件 - 对话和调用的方法是： navigator.notification.confirm（... ）。
For confirmation dialog I use phonegap plugin: cordova-plugin-dialogs and the method called is: navigator.notification.confirm(...).
下面是我的组件的我的全code：
Here is my full code of my Component:
AboutComponent = ng.core
.Component({
selector: 'rl-about',
templateUrl: 'app/components/about/view.html',
directives: [TopBarComponent, ng.router.ROUTER_DIRECTIVES]
})
.Class({
constructor: [Config, function(config) {
this.config = config;
this.title = "About";
this.top_bar_left = "Back";
}],
/**
* Back btn
*/
topBarLeftClick: function(){
window.history.back();
},
changeMessage: function(){
this.message = "Test";
var self = this;
navigator.notification.confirm(
"Delete this?",
function(buttonIndex) {
if(buttonIndex == 1) { //1 = Ok
console.log("Message before: " + self.message) //self.message has the old value ("Test")
self.message = "Deleted";
console.log("Message after: " + self.message) //self.message has the new value ("Deleted"), but nothing changed on view.html
}
},
"Confirm Delete",
["Delete", "Cancel"]
);
}
});
和HTML如下：
And the html looks like this:
<div class="page-wrapper">
<rl-top-bar [title]="title" [top_bar_left]="top_bar_left" (topBarLeftClick)="topBarLeftClick()" ></rl-top-bar>
<div class="about-info-wrapper">
<input type="text" [(ngModel)]="other_model" id="itemtoclick"/>
{{message}}
<div (click)="changeMessage()">click here</div>
</div>
</div>
{{}信息} 不更新时 navigator.notification.confirm 调用的回调，但如果我点击，例如它的更新的链接到一个角模型输入箱
{{message}} is not updating when the callback of navigator.notification.confirm is called, but it's updated if I click for example on input box which is linked to an angular model
一劈，我发现，工作是当回调被调用JavaScript中点击的东西。是这样的： window.document.getElementById（'itemtoclick'）点击（）
One hack that I found that is working is to click something from javascript when callback is called. Like this: window.document.getElementById('itemtoclick').click()
我尝试添加 .bind（本）到 navigator.notification.confirm（...），但它的投掷错误。
I try to add .bind(this) to navigator.notification.confirm(...) but it's throwing error.
我试图挽救这个给一个变量 navigator.notification.confirm 但同样的结果之前调用。
I try to save this to a variable before calling navigator.notification.confirm but same result.
同样的结果，如果我 .bind（本）回调方法。
Same result if I .bind(this) to callback method.
不知怎的，我必须提到这里面回调，因为我可以读取和更新，但angular2不知道我做了更改，以更新视图。
Somehow I have reference to this inside callback because I can read and update, but angular2 doesn't know that I made a change to update the view.
另外这个问题只在移动，如果我尝试在浏览器（Chrome）中运行它的工作确定。我用的PhoneGap构建创建为Android的.apk文件。
但问题也是明显的，如果我使用PhoneGap的移动应用程序为现场测试。
Also this problem is only on mobile, if I try to run on browser (chrome) it's working ok. I use phonegap build to create the .apk file for android. But the problem is also visible if I use Phonegap mobile app for live testing.
我想知道，如果有，将不涉及这样一个黑客的解决方案。
I want to know if there is a solution that will not involve a hack like this.
修改
这是我的第一个PhoneGap的应用程序
This is my first phonegap app
有关Android的我使用的PhoneGap构建
For Android I am using phonegap build
对于iOS我使用PhoneGap的CLI
For iOS I am using phonegap CLI
问题是在Android和iOS设备。
The problem is in both Android and iOS.
修改2016年4月1日
我创建了一个视频，以更好地说明问题：<一href=\"https://photos.google.com/share/AF1QipOIos6MPjLnYjFuVcbYefUpGfmfKF4INvn0oZnFEXGyrXsSkeO3ToDcgoPXwgbRFg/photo/AF1QipOq3pxjtX7eoxMLeWltX67nkfcQv4Oew5y2R8ui?key=MDNUaXhzejV2R2ZZUDkyY2E0R3hHamFYdlo4cnp3\"相对=nofollow>看到这里
I created a video to better describe the problem: See here
我也更改为不使用这个为 onDeviceReady 和问题依然在这里。
这里是我的main.js code：
Also I change to not using this for onDeviceReady and the problem is still here.
Here is my main.js code:
var phonegapApp = {
initialize: function() {
phonegapApp.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', phonegapApp.onDeviceReady, false);
},
onDeviceReady: function() {
console.log("phonegapApp onDeviceReady");
ng.platform.browser.bootstrap(AppComponent,[
ng.http.HTTP_PROVIDERS,
ng.router.ROUTER_PROVIDERS,
new ng.core.Provider(ng.router.LocationStrategy, {useClass: ng.router.HashLocationStrategy})
]);
}
};
和从 index.html的我称之为 phonegapApp.initialize（）; 我的<$ C的底$ C>体。
推荐答案
您可以尝试使用箭头功能能够使用的词汇是：
You could try to use an arrow function to be able to use lexical this:
this.message = "Test";
navigator.notification.confirm(
"Delete this?",
(buttonIndex) => {
if(buttonIndex == 1) { //1 = Ok
this.message = "Deleted";
}
},
"Confirm Delete",
["Delete", "Cancel"]
);
请参阅有关箭头功能词法此此链接更多的提示：
See this link for more hints about the lexical this of arrow functions:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions.
修改
如果您使用ES5，你可以尝试：
If you use ES5, you could try:
this.message = "Test";
var self = this;
navigator.notification.confirm(
"Delete this?",
function(buttonIndex) {
if(buttonIndex == 1) { //1 = Ok
self.message = "Deleted";
}
},
"Confirm Delete",
["Delete", "Cancel"]
);
这篇关于从PhoneGap的通知对话框时改变角2项不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
