Question

在Angular 2中停止Youtube嵌入视频的正确方法是什么？

与AngularJS一样，最好的解决方案似乎是使用JQuery来更改iframe的src属性，但在Angular2中应该避免这种情况。 Stop Youtube video after modal close

在角度2中，我不应该操纵dom，因此我的嵌入式iframe从我的组件中的变量中获取其src属性。当我取消设置此属性时，视频会按预期停止播放。

因此，(close)与按钮的绑定效果很好，但是当我在模态外点击时，它不会停止播放。

我已尝试在我的模式(close)中绑定(hide)，(hidden)，(dismiss)和<div>，但这些都不起作用。

我想知道这样的事情是否可行：

<div (hide)="stopVideoPlayer()" class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="modal-video" aria-hidden="true">
        <button (click)="stopVideoPlayer()" type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="modal-video">
            <iframe id="video-player" width="640" height="480" class="embed-responsive-item" [src]="selectedVideo" frameborder="0"></iframe>
          </div>
      </div>
    </div>
  </div>
</div>

Answer 1

你应该使用隐藏模态并且所有css转换完成后触发的(onHidden)。发出此方法中的值。

<div (onHidden)="afterHidden($event)"> </div>

Answer 2

实际上，如果您使用的是ngx-bootstrap模态，则事件名称为(onHide)。这将起作用。也就是说，找到包含模态@ViewChild参考（通常为#modal

的html模板）

<div bsModal #modal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" (onHide)="onModalHide($event)">

在代码中，定义此事件的方法

onModalHide(event){
// your code here
}

Answer 3

就我而言，我使用Angular 7及以下方法为我工作。

使用JQuery

$('#banner_video_modal').on('hidden.bs.modal', function () {
  // your code
});

使用点击事件监听器

由于 click 事件使模式被隐藏，因此其效果类似于hide，dismiss或close事件。

- ***.component.html
<div
     class="modal fade"
     id="banner_video_modal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true"
     (click)="onModalHide($event)"
>       
- ***.component.ts
onModalHide(e) {
    // here your code
}

Angular 2绑定模态的近似事件

3 个答案: