Angular 8, Firebase angular fire2, как найти изменение состояния наблюдаемой - PullRequest
Новая
       17

Angular 8, Firebase angular fire2, как найти изменение состояния наблюдаемой

1 голос
/ 08 января 2020

Я использую 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');
        }


      }

Я новичок здесь. Так что некоторые термины могут быть неправильными извините за это. Я был бы очень благодарен вам, если бы вы могли предоставить объяснение, чтобы решить эту проблему. Спасибо !!

1 Ответ

3 голосов
/ 08 января 2020

все переменные с типом super 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.
);

Rx JS и наблюдаемые являются мощными инструментами, основанными на концепции потоков и асинхронных c. Наблюдаемое можно рассматривать как поток данных, которые происходят на временной шкале.

Этот поток может быть обработан оператором. Ваш случай - игнорировать первое выбранное значение из вашего потока, а затем реагировать на все последующее. Существует один вызов оператора skip , который позволяет пропустить первое излучение N в вашем потоке. 

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

Из исходного потока создайте новый, в котором первое излученное значение будет игнорироваться.

Важная информация: наблюдаемые подписки уничтожаются только в следующих двух случаях:

  • , если наблюдаемые имеют ошибку или завершают поток.
  • , если подписка отменяется .

чем означает по вашему делу, если уничтожено 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();
    }
}
...