Question

我有一个parentComponent和几个这样的childComponents：

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

为父级：

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');
    }
});

成功：将“new”子组件添加到父组件中时，将调用子组件的聚合物生命周期“附加”方法，并且事件“< em> EVT_CHILD_ATTACHED '被触发，最后父组件能够监听并成功记录'子元素附加'。

失败：当删除“现有”子组件时，我可以看到子组件的聚合物生命周期'分离'方法被调用，事件' EVT_CHILD_DETACHED '也会被触发。但是父组件的onChildDetached（）永远不会被触发，也没有显示日志。

Qn ：当任何子组件“分离”时，如何让父组件做出反应/倾听？

注意：子组件可以动态添加或包装在循环条件或dom-if条件下，为简单起见，我已删除了这样的逻辑。

Answer 1

Application.DoEvents()事件无法按照预期的方式发挥作用。

来自documentation：

<强>分离

元素与文档分离后调用。可以叫   在元素的生命周期中多次。用途包括   删除detached中添加的事件侦听器。

使用而不是attached。

在元素与DOM树分离后，您的detachedCallback回调称为，这意味着该事件无法传播给它的父级，因为它没有一个

您需要创建一种不同的机制，不涉及在detached回调中触发事件。

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

Answer 2

解决方案：让ParentComponent在子组件“附加”后立即将分离的方法添加到所有childComponent。方法触发＆＃39; EVT_CHILD_ATTACHED＆＃39;并在这样的父组件中触发事件监听器。

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);
    }
})

可能不是最好的方式，但仍然可以胜任。

聚合物1：父组件没有从子组件的'分离'方法中侦听火灾事件？

2 个答案: