Angular 2绑定模态的关闭事件答案

【问题标题】：Angular 2 binding on modal's close eventAngular 2绑定模态的关闭事件
【发布时间】：2017-10-21 04:03:43
【问题描述】：

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

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

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

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

我尝试在我的模态<div> 中绑定(close)、(hide)、(hidden) 和(dismiss)，但它们都不起作用。

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

<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>

【问题讨论】：

如果你点击外部模式，它会关闭吗？
是的，它正常关闭
你能创建一个 plunkr 吗？

标签： javascript twitter-bootstrap angular typescript

【解决方案1】：

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

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

【讨论】：

似乎不起作用...我尝试了 (hidden) 和 (onHidden) 但它们都没有触发我的功能。
好吧，我尝试了已经说明的内容以及您对隐藏的建议，但到目前为止它们都不起作用
你能创建一个具有相关功能的 plunker，我会处理它并为你修复

【解决方案2】：

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

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

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

onModalHide(event){
// your code here
}

【讨论】：

【解决方案3】：

在我的例子中，我使用了 Angular 7 及以下对我有用的方法。

使用 JQuery

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

使用 click 事件监听器

由于 click 事件使模态框隐藏，它的效果类似于隐藏、关闭或关闭事件。

- ***.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
}

【讨论】：