web-dev-qa-db-ja.com

Observableを使用して変数の変更を検出する

Observablesの使用方法を誤解していると思います。値を入れたいのですが、値が変わると新しい値を出力するはずです。私はそれが彼らの目的だと思ったが、すべてのチュートリアルとドキュメントはこれを行うようには見えないが、同時に、私はそれらが常にこのように適用されるのを見る。たとえば、「angular」で「FirebaseListObservable」にサブスクライブする場合、firebaseの値が変更されると、サブスクリプションのスナップショットが起動します。これを独自の変数用に作成します。文字列変数を持っているだけで、それが変更されると、サブスクリプションが起動します。

javascriptrxjsobservable
14
Jus10

通常、コンポーネントでサブスクライブされるサービスにはオブザーバブルがありますが、この回答の便宜上、すべてを1つのクラスにバンドルしました。各ステップを説明するコメントをリストしました。これがお役に立てば幸いです。 ：）

import { Subject } from 'rxjs/Subject';

export class ClassName {
    // ------ Creating the observable ----------
   // Create a subject - The thing that will be watched by the observable
   public stringVar = new Subject<string>();

   // Create an observable to watch the subject and send out a stream of updates (You will subscribe to this to get the update stream)
   public stringVar$ = this.stringVar.asObservable() //Has a $ 

   // ------ Getting Your updates ----------
   // Subscribe to the observable you created.. data will be updated each time there is a change to Subject
   public subscription = this.stringVar$.subscribe(data => {
         // do stuff with data
         // e.g. this.property = data
   });

  // ------ How to update the subject ---------
   // Create a method that allows you to update the subject being watched by observable
   public updateStringSubject(newStringVar: string) {
     this.stringVar.next(newStringVar);
   }
   // Update it by calling the method..
   // updateStringSubject('some new string value')

   // ------- Be responsible and unsubscribe before you destory your component to save memory ------
   ngOnDestroy() {
     this.subscription.unsubscribe()
   }
}
22
Jonathan002

ReplySubjectを使用してこれを試してください。 TypeScript、angularfireを使用して、以下のコード例で説明しました

export class MessageService {
  private filter$: ReplaySubject<any> = new ReplaySubject(1);

  getMessagesOfType():FirebaseListObservable<any>{
   return this.af.database.list(this.messagesPath, {
    query: {
      orderByChild: 'type',
      equalTo: this.filter$
    }
  });
  }
  getClosedMessage(): void {
    this.filter$.next('closed');
  }
  getOpenMessage(): void {
    this.filter$.next('open');
  }
}

// in some other class
// MessagesSubject is assigned to messageService 
this.messageService.getMessagesOfType().subscribe((listOfMessages)=>{
 // this list will be updated when the this.filter$ updated see below functions
 console.log(listOfMessages); 
});
// update this.filter$ like this to get 
this.messageService.getClosedMessage();
// to get open messges in 
this.messageService.getOpenMessage();
0
bash