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给出的建议不起作用，因为“隐藏”模式中的dom-if不会从DOM中分离任何内容。设置restamp属性将使detached回调运行，但暂停任何事情都没有意义，因为该元素将被丢弃。如果您想将其保留在DOM中并冻结其状态，则需要在dom-change上收听dom-if事件并相应地运行.pause()。

Answer 2

除了简单地使用你的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 ;
}

}）;

Answer 3

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

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

如何使用Polymer生命周期钩子

3 个答案: