モーダルのクローズイベントでの角度2のバインディング

Question

Youtubeエンベデッドビデオを角2で停止する適切な方法はどれですか？

AngularJSのように、最良の解決策は、iframeのsrcプロパティを変更するためにJQueryを使用しているようですが、これは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>