ポリマーを使ってファイヤーストアのリスナーを外すことができません

Question

私はFirestoreを使ってポリマーでアプリを開発しています。 データベースからリスナーを切り離すことができないことを除いて、すべてうまくいきます。 誰もが同じコードを試すことができるように準備しました。

<link rel="import" href="../../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"> 
<dom-module id="test-app"> 
<template> 
    <style> 
     :host { 
      display: block; 
     } 
    </style> 

    <h2>connect</h2> 
    <paper-fab on-tap="connect"></paper-fab> 

    <h2>change something</h2> 
    <paper-fab on-tap="changeSomething"></paper-fab> 

    <h2>disconnect</h2> 
    <paper-fab on-tap="disconnect"></paper-fab> 

</template> 

<script> 
    class TestApp extends Polymer.Element { 
     static get is() { 
      return 'test-app'; 
     } 
     static get properties() { 
      return { 
       text: { 
        type: String 
       } 
      }; 
     } 
     getRef() { 
      return db.collection('utenti').doc('ZLpc0IDlkEVeb9DEKR2f') 
     } 
     connect() { 
      console.log('connect'); 
      this.getRef().onSnapshot((doc) => { 
       console.log('text Changed'); 
       console.log(doc.data()); 
       this.text = doc.data().titolo 
      }); 
     } 

     changeSomething() { 
      let newText = this.text + ' randomtext' 
      this.getRef().update({ 
       titolo: newText 
      }) 
     } 

     disconnect() { 
      console.log('disconnect'); 
      var unsubscribe = this.getRef().onSnapshot(function() {}); 
      unsubscribe(); 
     } 


    } 

    window.customElements.define(TestApp.is, TestApp); 
</script> 

例では、私は3つのボタン、 を持っている上に、私は同じ変更

を作るために、第2キーを押すよりも、最初の1を押すと、正しく文書

log 
1 connect 
2 text Changed 
3 [object] 

に接続します

log 
4 text Changed 
5 [object] 

私は3番目を押して切断します。

log 
6 disconnect 

と、この時点で私は断線が本当に起こっていることを確認するために、第2を押して、私はこの時点で

log 
7 text Changed 
8 [object] 

を取得するには、断線が本当に起こったことがないことは明らかです。 切断コードはFirestoreのマニュアルの外にあるので問題にはなりません。

firestoreオフラインの永続性が

を有効にしていませんでしたすべてのソフトウェアの

バージョンが更新されなければならない（亭からfirebase、糸からのポリマーCLI、クロムの最後のバージョン）これはかなり高価な問題であることを得ることができます...誰も助けることができますか？

Answer 1

私のテストに基づいて、最初のクエリを追跡し、後でそのクエリのサブスクライブを解除する必要があります。あなたは

var unsubscribe = this.getRef().onSnapshot(function() {}); 

（退会を導入する場合）にリスナーを切り離すために、新しいクエリとしてそれに作用して、切り離すためのもの1は削除されません。したがって、変数をクエリに保存し、後で手動で、または以下のようにオブザーバー経由でデタッチします。クエリが変更された場合、前のリスナーは引き続きリスンしており、（たとえば_handlerのオブザーバで）分離する必要があることに注意してください。

... 
<script> 
    class TestApp extends Polymer.Element { 
     static get is() { 
      return 'test-app'; 
     } 
     static get properties() { 
      return { 
       text: { 
        type: String 
       }, 
       //handler to save query for later removal 
       _handler: { 
        type: Object, 
        observer: '_onHandlerChange', 
        value: function(){ 
         return {} 
        }, 
       }, 
      }; 
     } 

     //save query into _handler 
     connect() { 
      this._handler = this.getRef().onSnapshot((doc) => { 
       console.log('text Changed'); 
       console.log(doc.data()); 
       this.text = doc.data().titolo 
      }); 
     } 

     //detach by accessing your initial query here 
     disconnect() { 
      var unsubscribe = this._handler; 
      unsubscribe(); 
     } 

     //or you could keep removing old query if your query changes like this 
     _handlerChanged: function(newH,oldH) { 
      console.log(`_handlerChanged` , newH , oldH); 
      if (!oldH) return ; 
      const unsubscribe = oldH; 
      unsubscribe(); 
     }, 

    window.customElements.define(TestApp.is, TestApp); 
</script>