Angular 2,bootstrap模态

时间:2017-05-10 14:56:51

标签: twitter-bootstrap angular

我有一个模态

<div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Create Goal</h4>
      </div>
      <div class="modal-body">
         <p>Modal body text</p>
      </div>
    </div>
  </div>
</div>

我正在使用http://valor-software.com/ngx-bootstrap/#/modals#modal-directive

但我无法弄清楚如何对指令输出做出反应,例如onHide / onShow等。

我想在隐藏模态时进行一些处理。

1 个答案:

答案 0 :(得分:2)

您可以添加监听输出事件。例如'onHidden'

<div bsModal #largeModal="bs-modal" (onHidden)="onHidden()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Create Goal</h4>
      </div>
      <div class="modal-body">
         <p>Modal body text</p>
      </div>
    </div>
  </div>
</div>

当你的模型隐藏时,它将执行onHidden Function。

在文件Component中添加onHidden()函数。

public onHidden() {
    // do our stuff 
  }