监听收到的聊天事件答案

【问题标题】：Listening for received chat event监听收到的聊天事件
【发布时间】：2017-08-12 18:09:35
【问题描述】：

我对 Firebase 和 angular2 都很陌生。所以我正在尝试通过教程制作一个集成 Firebase 的 angular2 聊天应用程序。我已关注 this tutorial 制作聊天应用程序。问题是除了简单的聊天之外，我还想在有人写信或收到新的聊天时创建一个祝酒词。但我似乎找不到可以收听该事件的代码。

知道在哪里可以找到它吗？

角度组件看起来像这样

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标记

<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>

【问题讨论】：

标签： angular typescript firebase angularfire

【解决方案1】：

reddit 的一位绅士帮助我并告诉我检查 FirebaseObservables 并监听它的变化。

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

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

只要聊天线程中有任何新消息，主模块内的这个 sn-p 就会触发。

希望对某人有所帮助

【讨论】：