聚合物1：父組件未從子組件的“分離”方法偵聽火災事件？

Question

我有一個parentComponent和幾個childComponents像這樣：

<parent-component>
    <child-component> child_1 </child-component>
    <child-component> child_2 </child-component>
</parent-component>

ParentComponent：

Polymer({
    is: 'parent-component',
    listeners: { 
       'EVT_CHILD_ATTACHED': 'onChildAttached'
       'EVT_CHILD_DETACHED': 'onChildDetached'
    },
    onChildAttached: function () {
        console.log('child elem is ATTACHED');
    },
    onChildDetached: function () {
        console.log('child elem is DETACHED');
    }
})

ChildComponent：

Polymer({
    is: 'child-component',
    attached: function () {
        this.fire('EVT_CHILD_ATTACHED');
    },
    detached: function () {
        this.fire('EVT_CHILD_DETACHED');
    }
});

成功 ：將“新”子組件添加到父組件時，將調用子組件的聚合物生命周期“ attached”方法，並觸發事件“ EVT_CHILD_ATTACHED ”，最后父組件能夠監聽和記錄“ child” elem已成功附加 。

失敗 ：刪除“現有”子組件后，我可以看到該子組件的聚合物生命周期“分離”方法已被調用，並且事件“ EVT_CHILD_DETACHED ”也被觸發。 但是父組件的onChildDetached（）不會被觸發，也不會顯示任何日志。

問 ：當任何子組件“ 分離 ”時，我如何使父組件做出反應/監聽？

注意：子組件可以在循環條件或dom-if條件下動態添加或包裝，為簡單起見，我已刪除了此類邏輯。

Answer 1

detached事件無法按您期望的方式工作。

從文檔中 ：

超脫

在元素與文檔分離后調用。 在元素的生存期內可以多次調用。 用途包括刪除attached添加的事件偵聽器。

使用而不是detachedCallback 。

將元素從DOM樹分離后，將調用detached回調，這意味着該事件無法傳播到其父級，因為該事件沒有父事件。

您將需要創建一種不同的機制，該機制不涉及在detached回調中觸發事件。

例如，您可以在child保留parent元素的引用（可以在attached回調中獲取），然后在child的detached事件處理程序中手動調用parent的onChildDetached方法。

Answer 2

解決方案：讓子組件在子組件的“ attached”方法觸發“ EVT_CHILD_ATTACHED”並觸發父組件中的事件偵聽器之后，立即將分離的方法添加到所有childComponent中。

Polymer({
    is: 'parent-component',
    listeners: { 
       'EVT_CHILD_ATTACHED': 'onChildAttached'
    },
    onChildAttached: function (evt) {
        console.log('child elem is ATTACHED');
        var self = this;
        evt.target.detached = function () {
            self.onChildDetached(this);
        }
    },
    onChildDetached: function (target) {
        console.log('child elem is DETACHED', target);
    }
})

可能不是最好的方法，但是仍然可以做到。