javascript - Angular 2 绑定(bind)模态的关闭事件

Question

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

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

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

所以，(close)绑定(bind)到按钮效果很好，但是当我在模式之外单击时它不会停止播放。

我尝试绑定(bind)(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

您应该使用 (onHidden) ，它会在模式隐藏且所有 css 转换完成后触发。发出此方法中的值。

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