angular - 当 Ionic 3 中的 Firestore 集合发生更改时，如何实现应用程序范围的通知功能？

Question

我目前正在开发一个ionic 3项目，其中实现了聊天功能。我使用 firebase firestore 作为我的数据库。

我的目标是实现一个应用程序范围的通知功能，当在firestore聊天集合中创建新消息时触发，但我我在尝试实现这一目标时遇到了一些困难。

这是我的:

this.chat = this.firestoreProvider.getChatRooms(userEmail).valueChanges();
this.chat.subscribe(res=>{
// Triggered when there are changes in the firestore chat room collection
});

这是我的 firestoreProvider 中的代码块:

getChatRooms(chatRoomOwnerEmail:string){    
   return this.firestore.collection("Chat Room", ref => ref.where("chatRoomOwnerEmail", "==", chatRoomOwnerEmail).orderBy("chatRoomLastMessage", "asc"));
}

我尝试将此方法放入我的 app.component.ts 中，但当我执行 ionic 服务时，它使我的整个应用程序崩溃。

是否有任何解决方案可以帮助我使用在应用程序中的所有页面上触发的 firestore 来实现此实时通知功能？ (意味着在所有页面中，聊天室中新消息的检查将继续触发)。

更新:

我设法获取了实时通知，但现在我需要在有通知时在主页上执行某些操作。关于如何做到这一点有什么建议吗？

Answer 1

好吧，由于您使用的是 ionic，因此您可以使用托管 ion-nav 的 AppComponent 来监听更改。例如，当您收到响应时，请显示一个 toast 。

这样，即使 View 发生变化，AppComponent 仍将位于 View 上，并且仍会监听更改。

在这里，尝试一下:

import { Component } from "@angular/core";
import { Platform } from "ionic-angular";
import { Subscription } from "rxjs";
import { ToastController } from "ionic-angular";

import { TabsPage } from "../pages/tabs/tabs";
import { DataService } from "./data.service";

@Component({
  templateUrl: "app.html"
})
export class MyApp {
  rootPage: any = TabsPage;
  changeSubscription: Subscription;

  constructor(
    platform: Platform,
    private dataService: DataService,
    public toastController: ToastController
  ) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
    });
  }

  ngOnInit() {
    this.changeSubscription = this.dataService
      .listenForChange()
      .subscribe(response => {
        const toast = this.toastController.create({
          message: "Data Changed!",
          duration: 3000
        });
        toast.present();
      });
  }

  ngOnDestroy() {
    this.changeSubscription.unsubscribe();
  }
}

NOTE: I'm using Ionic V3 syntax in the answer as StackBlitz doesn't have a Template for V4 ATM. If you're using V4, the syntax might change slightly.

You might also NOT want to subscribe to the Observable and rather use the Observable with an async pipe in the template instead. That way you'd be safe from any memory leaks. I'm subscribing to the Observable as I had to show the toast.

Here's a Working Sample Code for your ref.