收到 fcm 推送通知后更新页面上的视图并且我在同一页面上

Question

我在 Ionic4 中有一个应用程序正在接收各种数据更新的 FCM 推送通知。推送工作没有问题，在通知的数据有效负载中我放置了各种标签，然后我在应用程序中使用这些标签根据有效负载更改行为，例如更改我用来管理前台的警报控制器的标题和描述通知：

this.FCM.onNotification()
.subscribe( data => {
   if (data.wasTapped) {
     this.router.navigateByUrl(data.mobile_page);
} else {
 this.presentAlertConfirm(data);
//this.router.navigateByUrl(data.mobile_page);
}
});   

[...]

async presentAlertConfirm(data) {

var dataheader;

// Verifico il tipo di messaggio nel payload della notifica push 

if (data.msgtype == 'msg') {
  dataheader = 'Nuovo Messaggio';
}

[...]

var messageurl = data.mobile_page;

const alert = await this.alertController.create({
  header: dataheader,
  message: 'Premere OK per visualizzare',
  buttons: [
    {
      text: 'Ignora',
      role: 'cancel',
      cssClass: 'secondary',
      handler: (blah) => {
        console.log('Confirm Cancel: blah');
      }
    }, {
      text: 'OK',
      handler: () => {
        this.router.navigateByUrl(data.mobile_page);
        console.log('Confirm Okay');
      }
    }
  ]
});

到目前为止，这部分工作没有问题。例如，如果我在应用程序中收到一条新消息，则会出现警报弹出窗口，我可以单击 "OK" 转到显示消息的页面。这是我无法自己解决的棘手部分。如果我在消息页面 中收到另一条消息 ，我会收到警报弹出窗口，但即使我单击 "OK"，视图也不会再次呈现，并且新的消息未显示。作为一种解决方法，我在页面中添加了一个刷新按钮和一个 ion-refresher 来完成工作，但我想知道是否有可能实现我正在寻找的东西，获得新消息无需手动单击刷新按钮或向下滑动即可显示 ion-refresher.

这是我在消息详细信息页面上的 ngOnInit() 中的代码：

this.badge.clear();
this.getLoggedUserId();
this.getMessageSingleThread(this.route.snapshot.paramMap.get('thread_id'));

getMessageSingleThread 函数在我的网络服务上调用了一个 rest 方法，它是在通知弹出窗口上单击“确定”后应该调用的方法。

我尝试了在这里和其他站点（包括 NgZone）中找到的许多不同的解决方案，但没有成功。我确定我在做一些愚蠢的事情。到目前为止，所有使用带有 FCM 订阅和重新加载的单个页面的示例，我确信这是一个可行的解决方案，但不适用于我的情况，因为我有一个多页面应用程序，FCM 编码为 app.component.ts.

非常感谢

Answer 1

如评论中所述，一个可能的解决方案（可能不是最好的，但仍然值得实施）是在共享的单例服务上使用 Subject为了能够通知当前订阅该主题的任何视图已收到新消息。

服务部分涉及声明 Subject 并提供从中发出值的方法。

从“@angular/core”导入{可注射}；从 'rxjs';

导入 { 主题 }

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  /**
   * Holds the shared reference of the subject.
   */
  public _OnMessageReceivedSubject: Subject<string>;

  public constructor() {
    // Creates a new subject.
    this._OnMessageReceivedSubject = new Subject<string>();
  }

 /**
 * emits a message. 
 */
  public emitMessageReceived(msg: string): void {
    this._OnMessageReceivedSubject.next(msg);
  }
}

Stackblitz to play with

收到 fcm 推送通知后更新页面上的视图并且我在同一页面上

Update view on a page after an fcm push notification has been received and I'm on the same page

javascript

reload

push-notification

angular

ionic4