Angular - 关闭带有事件的模态窗口

Question

我想在模式窗口中单击关闭按钮时触发一个事件。按钮有属性data-dismiss="modal"，不调用click事件。是否有可能有数据关闭和click事件或只有click事件和关闭类的模式？

<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" (click)="close()">&times;</button>
    <h4 class="modal-title">{{modalHeader}}</h4>
  </div>
 </div>
</div>


close() {
    //Can I close modal window manually?
    this.onClose.emit();
  }

方法close不调用，因为按钮有data-dismiss属性。

谢谢

Answer 1

在角度中，使用[hidden]属性来显示/隐藏模型弹出窗口，并data-dismiss="modal"在关闭按钮中删除

尝试这个

<div [hidden]="IsmodelShow" class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="close()">&times;</button>
        <h4 class="modal-title">{{modalHeader}}</h4>
      </div>
     </div>
    </div  

close() {
    this.IsmodelShow=true;// set false while you need open your model popup
   // do your more code
}

更新

只需添加data-target="#modal"你的 div 就可以了

<div class="modal-dialog" data-target="#modal">
 <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" (click)="close()">&times;</button>
    <h4 class="modal-title">{{modalHeader}}</h4>
  </div>
 </div>
</div>


close() {
//write your code
}

更新2

您需要将 data-target 设置为模态的目标 id，并将 data-toggle = "modal" 设置为要激活模态的按钮

<div [hidden]="IsmodelShow" class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="close()">&times;</button>
        <h4 class="modal-title">{{modalHeader}}</h4>
      </div>
     </div>
    </div  

close() {
    this.IsmodelShow=true;// set false while you need open your model popup
   // do your more code
}