受信したチャットイベントのリッスン

Question

私はFirebaseだけでなく、angular2もかなり新しくなっています。だから私はチュートリアルを通してFirebaseにangular2 Chatアプリケーションを統合しようとしています。私は this tutorialに続いてチャットアプリを作った。問題は、単純なチャットに加えて、誰かが新しいチャットを書いたり受け取ったりするときにトーストを作りたいということです。しかし、私はそのイベントを聞くことができるコードを見つけることができないようです。

どこから見つけたらいいですか？

のredditから角度成分がこの

import { Component } from '@angular/core'; 
import { AngularFire, AuthProviders, AuthMethods, FirebaseListObservable } from 'angularfire2'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    items: FirebaseListObservable<any>; 
    name: any; 
    msgVal: string = ''; 

    constructor(public af: AngularFire) { 

     this.items = af.database.list('/messages', { 
      query: { 
      limitToLast: 5 
      } 
     }); 

     this.af.auth.subscribe(auth => { 
      if(auth) { 
      this.name = auth; 
      } 
     }); 
    } 

login() { 
    this.af.auth.login({ 
     provider: AuthProviders.Facebook, 
     method: AuthMethods.Popup, 
    }); 
    } 

chatSend(theirMessage: string) { 
     this.items.push({ message: theirMessage, name: this.name.facebook.displayName}); 
     this.msgVal = ''; 
    } 
} 

のようなものを見て、これはHTMLマークアップGentlementの

<div class="row columns"> 
    <button (click)="login()" *ngIf="!name">Login With Facebook</button> 

    <input type="text" id="message" *ngIf="name" placeholder="Chat here..." (keyup.enter)="chatSend($event.target.value)" [(ngModel)]="msgVal" /> 

    <div class="chat-container" *ngFor="let item of items | async"> 
     <a href="#">{{item.name}}</a> 

     <p>{{item.message}}</p> 
    </div> 
</div> 

Answer 1

一つですが助けてくれたし、FirebaseObservablesをチェックし、その上に変化を聞くように言わ。

initializeApp(firebaseConfig); 
database().ref().on('value', function(snapshot){ 

    var x = snapshot.val() 
    console.log("This prints whenever there is a new message"); 
}); 

チャットスレッドに新しいメッセージがあるたびに、メインモジュール内のこのスニペットがトリガーされます。

希望すると助かります