Angular 8，Firebase angularfire2 如何找到可观察的状态变化

Question

我使用 angular fire 2 、firebase 和 angular 来开发一个项目。有一个通知组件。所以我想在可观察的内容发生变化时显示警报。有没有办法做到这一点 ？

这是我的代码： 每当可观察项目的内容发生变化时，我都想显示警报（“通知”）。

      import { Component, OnInit } from '@angular/core';
      import { AngularFirestoreDocument, AngularFirestoreCollection, AngularFirestore } from 'angularfire2/firestore';
      import { Observable } from 'rxjs';

      export interface Item { age: string; name: string; data: string }
      @Component({
        selector: 'app-notifications',
        templateUrl: './notifications.component.html',
        styleUrls: ['./notifications.component.scss']
      })
      export class NotificationsComponent   {


        private itemDoc: AngularFirestoreDocument<Item>;
        item: Observable<Item>;
        oldItem:any ;//this is for tack document changes 
        public user ;
        itemsCollection: AngularFirestoreCollection<Item>;


        constructor(public  afs: AngularFirestore) {
            this.itemDoc = afs.doc<Item>('Notifications/5xmXcPPVmPgWi4uttnN2v6rrMmD2/1235/fEsNdG9LaHNPK2f3LYuH/');
            this.item = this.itemDoc.valueChanges();

          }

          update(item: Item) { 
            this.itemDoc.update(item);
          }


        public   addItem(name: string , age:string , data:string) {
          this.itemsCollection = this.afs.collection<Item>('Notifications');
          const id = this.afs.createId();
          const item: Item = { age , name , data };
          this.itemsCollection.doc('5xmXcPPVmPgWi4uttnN2v6rrMmD2/1235/fEsNdG9LaHNPK2f3LYuH/').set(item);
        }

        public test(){
          this.addItem('Ama1l'  , 'Namal' , 'Sujit');
        }


      } 

我是这里的初学者。所以有些条款可能是错误的对不起。如果您能提供解决此问题的解释，我将非常感谢您。 谢谢 ！！

Answer 1

所有具有超类型Observable 的变量都有方法subscribe()。

此方法接收 3 个参数（其中 2 个是可选的）。

在你的第 24 行你可以这样做：

this.item = this.itemDoc.valueChanges();
this.item.subscribe(
   (item) => alert("Notification"), // Will be called on any value changes.
   (err) => console.log(err), // Optional params : will be called if error occur.
   () => console.log('stream is finished') // Optional params: will be called just before stream is finished and will not have any value change anymore.
);

---

RxJS 和 observable 是基于流和异步概念的强大工具。 一个 observable 可以被认为是发生在时间线上的数据流。

此流可以由操作员操作。您的情况是忽略流中第一个发出的值，然后对所有未来的值做出反应。它存在一个操作员调用skip，它允许您跳过流中的第 N 个发射。

this.item.pipe(skip(1)).subscribe([...])

从您的原始流创建新的流，其中第一个发出的值将被忽略。

---

重要信息：可观察订阅仅在以下两种情况下被销毁：

• 如果 observable 有错误或完成流。
• 如果订阅取消订阅。

than 意味着在您的情况下，如果 NotificationsComponent 被销毁（从 DOM 中删除）。订阅仍将被订阅，并且您仍然会收到任何更改的警报，无论您的组件是否仍然存在。

以防止这种可能意外的行为。您必须在 OnDestroy 生命周期挂钩上存储订阅和取消订阅。

  export class NotificationsComponent  implement OnDestroy {
    [...]
    item: Observable<Item>;
    subscriptionItem: Subscription = null;
    [...]


    constructor() { 
      this.subscriptionItem = this.item.subscribe([...]);
    }

    ngOnDestroy() {
        if (this.subscriptionItem !== null)
            this.subscriptionItem.unsubscribe();
    }
}