离子 - Onesignal - 论handleNotificationReceived不更新视图
问题描述:
我尝试更新一个阵列中后收到的通知从Onesignal像这样:离子 - Onesignal - 论handleNotificationReceived不更新视图
getMsg.ts:
getMsg = Array<Object> = [];
...
constructor(... private oneSignal: OneSignal ...) {
...
this.oneSignal.handleNotificationReceived().subscribe(() => {
this.getMessage();
console.log('handleNotificationReceived');
});
}
getMessage() {
this.getMsg.push({ text: 'some text' });
console.log('getMessage');
// Push is working
console.log(JSON.stringify(this.getMsg)); // [{"text":"some text"}]
}
getMsg.html:
...
<ion-list *ngFor="let m of getMsg">
<ion-item>
<p>{{ m.text }}</p>
</ion-item>
</ion-list>
...
但它没有按预期工作。
我在我的getMsg.html
文件中有一个<textarea>
,当我输入它时,视图神奇地更新(在我收到通知之后)。
很明显,如果我直接使用功能getMessage()
,它的工作原理。
我尝试过,是更新/重装的观点:
this.navCtrl.setRoot(this.navCtrl.getActive().component);
,但没有运气。
Ionic: v3.4.0
Cordova: v7.0.1
答
后打破了我的大脑的几天里,我用下面的网站的帮助下解决这个问题:
角2个运行的内部自己的特殊称为NgZone的区域。在区域内运行允许检测何时异步任务 - 可以改变应用程序的内部状态并因此改变其视图的事物 - 开始和结束。由于这些异步任务是唯一会导致我们的视图发生变化的事情,通过检测它们何时执行,Angular 2知道视图可能需要更新。
解决方案代码:
// Import NgZone
import { Component, NgZone } from '@angular/core';
// We add it to the constructor
constructor(... private zone: NgZone, private oneSignal: OneSignal ...) {
...
this.oneSignal.handleNotificationReceived().subscribe(() => {
this.getMessage();
});
}
getMessage() {
// And here we run "NgZone"
this.zone.run(() => {
this.getMsg.push({ text: 'some text' });
});
}