Ionic Firebase Promise，每次更改值时调用一个函数答案

【问题标题】：Ionic Firebase Promise, call a function every time a Value got changedIonic Firebase Promise，每次更改值时调用一个函数
【发布时间】：2017-12-22 05:09:16
【问题描述】：

我想创建一个提供程序，它是我的应用程序和 Firebase 之间的唯一接口。
如果我做错了什么可怕的事情，我很抱歉。我想要做的是每次某个值发生变化时调用一个函数在我的 FirebaseProvider 之外。

FirebaseProvider：

onUpdateLobby(key){
    return new Promise((resolve,reject)=>{
      firebase.database().ref("/games").child(key).on('value',(snap)=>{
        console.log("update");
        if(snap) resolve(snap.val());
        else reject(Error("onUpdateLobby Error"));
      });
    });
  }

测试页

this.db.onUpdateLobby('test').then((snap) => {
  console.log(snap);
  // do stuff with the data
}).catch((err) => {
  console.log(err);
});

在我的 TestPage 中，我想在每次发生更改时使用 Console.Log 整个对象，这甚至可能吗？（我想通过我的 Provider 与 Firebase 通信）

更改值 3 次后我的控制台如下所示：

更新（来自提供者）
asdasdasd （来自 TestPage）
更新（来自提供者）
更新（来自提供者）
更新（来自提供者）

谢谢！

【问题讨论】：

您在 TestPage 的哪个位置运行此代码？需要注意的一件事是，promise 不像 observables 那样工作。您需要调用该函数以获取响应。

标签： angular typescript firebase firebase-realtime-database ionic2

【解决方案1】：

正如我在评论中提到的。我认为您遇到的问题是您返回的是承诺而不是EventEmitter。请尝试以下代码。

Firebase 提供者：

lobbyChanges = new EventEmitter<string>;

onUpdateLobby(key){
    firebase.database().ref("/games").child(key).on('value',(snap)=>{
        console.log("update");
        if (snap) this.lobbyChanges.emit(snap.val());
        else this.lobbyChanges.error(Error("onUpdateLobby Error"));
    });
}

测试页：

this.db.lobbyChanges.subscribe(
    (snap) => {
        console.log(snap);
        // do stuff with the data
    (err) => {
        console.log(err);
});
this.db.onUpdateLobby('test')

【讨论】：

【解决方案2】：

我认为这是实现您想要的一种方式。

在 FirebaseProvider 中创建一个公共函数 (listenToGamesNode())，该函数将回调函数作为参数以及子节点键。该函数注册一个监听器，并在节点发生变化时调用提供的回调。

stopListeningToGamesNode()-函数移除监听器。

FirebaseProvider：

export class FirebaseProvider{
    private gamesRef:any;

    constructor(){
        this.gamesRef = firebase.database().ref('games');
    }

    listenToGamesNode(key, callback){
        this.gamesRef.child(key).on('value', callback);
    }

    stopListeningToGamesNode(key){
        try{
            this.gamesRef.child(key).off('value');
        }
        catch(e){
            // Handle error
        }
    }
}

然后在您的 TestPage 组件中，注入 FirebaseProvider。使用生命周期事件ionViewWillEnter 开始监听，使用ionViewWillLeave 停止监听节点。

测试页：

export class TestPage{
    private key:string = 'test';

    constructor(private firebaseProvider: FirebaseProvider){}

    ionViewWillEnter(){
        this.firebaseProvider.listenToGamesNode(this.key, this.callback);
    }

    ionViewWillLeave(){
        this.firebaseProvider.stopListeningToGamesNode(this.key);
    }

    private callback(snapshot){
        if(snapshot.exists()){
            console.log(snapshot.val());
        }
        else{
            // Handle missing node
        }
    }
}

【讨论】：