Angular 8、Firebase angular fire2如何找到一个observable的状态变化

Question

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

这是我的代码：我想在可观察项的内容发生变化时显示警报（"Notification"）。

      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 是基于流和异步概念的强大工具。一个可观察对象可以被认为是发生在时间轴上的数据流。

此流可以由操作员操作。您的情况是忽略流中的第一个发出的值，然后对所有未来的值做出反应。它存在一个操作员调用 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();
    }
}

Angular 8、Firebase angular fire2如何找到一个observable的状态变化

Angular 8 , Firebase angular fire2 how to find an observable's state change

rxjs

firebase

typescript

angularfire2

angular