我无法使用聚合物在 Firestore 上分离监听器

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 个按钮， 按第一个将正确连接到文档

log 
1 connect
2 text Changed
3 [object]

比我按第二个来做同样的改变

log 
4 text Changed
5 [object]

比我按第三个断开连接

log
6 disconnect

此时我按下第二个以检查断开连接是否真的发生了，我得到了

log
7 text Changed
8 [object]

此时很明显，断开连接从未真正发生过。 断开代码就在firestore文档之外，所以这不是问题。

应更新所有软件的版本（来自 bower 的 firebase、来自 yarn 的聚合物 cli、最新版本的 chrome）

firestore 离线持久性从未启用

这可能会成为一个非常昂贵的问题...有人可以帮忙吗？

Answer 1

根据我的测试，您需要跟踪您的初始查询，然后调用取消订阅。当你介绍

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

unsubscribe() 将其作为一个新的查询来分离侦听器，并且不会删除您打算分离的那个。因此，将您的查询保存在一个变量中，然后手动或通过观察者分离，如下所示。请记住，如果您的查询发生更改，则先前的侦听器仍在侦听并且需要分离（例如，在 _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>