Ionic - Onesignal - 在 handleNotificationReceived 上不更新视图

Question

我在收到 Onesignal 的通知后尝试更新数组，如下所示：

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()，它就可以工作。

我也尝试过 update/reload 视图：

this.navCtrl.setRoot( this.navCtrl.getActive().component );

但运气不好。

Ionic: v3.4.0
Cordova: v7.0.1

Answer 1

经过几天的折腾，我借助以下网站解决了这个问题：

Understanding Zones and Change Detection in Ionic 2 & Angular 2

Angular 2 runs inside of its own special zone called NgZone. Running inside a zone allows one to detect when asynchronous tasks – things that can alter the internal state of an application, and therefore its views – start and finish. Since these asynchronous tasks are the only thing that are going to cause our views to change, by detecting when they are executed Angular 2 knows that a view may need to be updated.

解决方案代码：

// 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' } );

    } );       
}

Ionic - Onesignal - 在 handleNotificationReceived 上不更新视图

Ionic - Onesignal - On handleNotificationReceived doesn't update view

ionic-framework

onesignal

ionic3