如何使用 Polymer 生命周期钩子

Question

我有一个包含视频的组件。我的组件嵌套在 dom-if 中，可以消失。发生这种情况时，视频（和声音）会继续播放。

有没有一种方法可以让我的组件检测到它已从 DOM 中消失？我已尝试使用此处所述的 'detached' 回调：https://www.polymer-project.org/1.0/docs/devguide/registering-elements

Polymer({
  is: 'my-component-with-video',

  properties: {
     // some properties
  },

  detached: function() {
    console.log('Component detached');
    // more code to stop video
  },

但是当我的元素被 dom-if 删除时没有任何反应，我没有看到 console.log 消息。我做错了什么？

Answer 1

这里有两种可能的情况：

您希望您的元素在条件改变时被丢弃并重新创建。
您想将其保留在 dom 中，但将其冻结。

在第一种情况下，您需要将 restamp 属性添加到 dom-if 以确保模板 DOM 被销毁，而不是隐藏。默认情况下，dom-if 在第一次初始化时标记模板，然后在条件变为假时将其从视图中隐藏。

在第二种情况下，Intervalia给出的建议将不起作用，因为"hide"模式中的dom-if不会与DOM分离任何东西。设置 restamp 属性将使 detached 回调运行但随后没有必要暂停任何内容，因为该元素将被丢弃。如果您想将其保持在 DOM 并冻结它的状态，您需要相应地在 dom-if 和运行上收听 dom-change 事件 .pause()。

Answer 2

在您的分离函数中，您需要获取视频元素并对其调用 .pause()。

您可能还需要在您的条件发生变化时调用 .pause()，这会导致 dom-if 移除播放器。

Answer 3

除了简单地使用 dom-if 而不是

之外，不需要任何解决方法

<dom-if if="[[condietionBoolean]]">
<your-video-element id="giveanId"></your-video-element>
</dom-if>

像下面这样编写 if 语句，这样每次您的条件发生变化时，您都会检查并确保视频在您喜欢的时候暂停。见下文。

...
<dom-if if="[[_shouldShowVideo(conditionBoolean)]]">
<your-video-element id="giveanId"></your-video-element>
</dom-if>

...

Polymer({
  is: 'my-component-with-video',

  properties: {

     conditionBoolean : {
        type: Boolean, 
     },

  },

_shouldShowVideo: function(conditionBoolean ) {
   if (!conditionBoolean) this.$$(#yourVideoElementId).pause();
   return conditionBoolean ;
}

});

如何使用 Polymer 生命周期钩子

How to use Polymer lifecycle hooks

polymer

polymer-1.0