Bootstrap 模态关闭事件不会触发模态覆盖的关闭答案

【问题标题】：Bootstrap modal close event does not trigger a close of modal overlayBootstrap 模态关闭事件不会触发模态覆盖的关闭
【发布时间】：2020-08-18 10:09:15
【问题描述】：

我有一个场景，我想使用单个组件添加新请求和编辑现有请求，并在需要时使用正确的数据重新生成它。以下是基本组件的代码。

home-component.html

<ul class="request-list">
  <li class="request-list-element" *ngFor="let requestItem of requestList; index as i">
    <div class="request-element-{{i}}" >
     .
     .
     .
     <div (click)="showReqform(requestItem,i)" data-toggle="modal" data-target="#requestModal">
       <mat-icon>create</mat-icon>
     </div>
    </div>
  </li>
</ul>
<button mat-mini-fab type="button" (click)="showReqform(formData,-1)" data-toggle="modal" data-target="#requestModal" >
  <mat-icon aria-label="Add a Request">add</mat-icon>
</button>
<div class="addRequest">
  <app-reqeust-form [dataValue]="formData" (removeEvent)="removeDialog()" *ngIf="isNewFormVisible"></app-reqeust-form>
</div>

home-component.ts

ngOnInit() {
  this.data.getRequestList().subscribe( dataResponse => {
    this.requestList = dataResponse asRequest[]
  })
}

showReqform(dataFormValue,indexValue){
  if(indexValue == -1)
    this.formData = <Request>{}
  else
    this.formData = dataFormValue
  this.isNewFormVisible = !this.isNewFormVisible
}

removeDialog(){
  this.data.getRequestList().subscribe( dataResponse => {
    this.requestList = dataResponse as Request[]
    this.isNewFormVisible = false
  })
}

上面的组件列出了所有的req。并提供了一个编辑选项，它将使用表单组件打开一个模式。该表单存在于以下组件中：

request-form-component.html

<div class="modal fade" id="requestModal" role="dialog" (click)="removeFunction($event)">
  <div class="modal-dialog" role="document" >
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="initiateClose()" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="requestForm" [formGroup]="addRequestForm">
          .
          .
          .
          // either the button for adding a request or updating the request
          <div class="buttonDiv" *ngIf="!isEditRequest">
            <button mat-raised-button (click)="addData()">Add</button>
          </div>
          <div class="button" *ngIf="isEditRequest">
            <button mat-raised-button (click)="submitEditedData()"> Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

request-form-component.ts

@Input ()
dataValue:Request

@Output () 
removeEvent = new EventEmitter()

isEditRequest: Boolean

ngOnInit() {
  if(Object.keys(this.dataValue).length === 0){
    // initialize dataValue with null values
    this.isEditRequest = false
  }
  else
    this.isEditRequest = true
}

removeFunction($event){
  if($event.target.attributes.role != undefined)
    if($event.target.attributes.role.value == 'dialog')
      this.removeEvent.emit()
}

addData() {
  this.data.addRequest(this.addRequestForm.value).subscribe(data => {
    //handling success scenario
    this.removeEvent.emit()
  }
}

submitEditedData(){
  this.data.editRequest(this.addRequestForm.value).subscribe(data => {
    //handle success scenario
    this.removeEvent.emit()
  }
}

现在的问题是，单击模态定义区域之外的任何位置，模态将关闭并从 DOM 中删除。但是当更新或添加事件发生时，结果就不一样了。模态关闭，但不透明的覆盖仍然存在。我可以在 DOM 中看到这个

<div class="modal-backdrop show"></div>

我尝试取消订阅添加和编辑请求，但没有达到预期的效果。

【问题讨论】：

标签： angular bootstrap-4 bootstrap-modal

【解决方案1】：

您应该触发关闭按钮的click 事件。

<button #closebutton type="button" class="close" (click)="initiateClose()" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
</button>

在您的组件中：

@ViewChild('closebutton') closeButton: ElementRef;
triggerClick() {
    let el: HTMLElement = this.closeButton.nativeElement as HTMLElement;
    el.click();
}

【讨论】：

谢谢！这行得通！你能告诉我发生这种情况的原因吗

【解决方案2】：

在 Angular 中你可以使用隐藏

<div [hidden]="hideModal"  class="modal fade" id="requestModal" role="dialog" (click)="removeFunction($event)">
  <div class="modal-dialog" role="document" >
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="initiateClose()" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="requestForm" [formGroup]="addRequestForm">
          .
          .
          .
          // either the button for adding a request or updating the request
          <div class="buttonDiv" *ngIf="!isEditRequest">
            <button mat-raised-button (click)="addData()">Add</button>
          </div>
          <div class="button" *ngIf="isEditRequest">
            <button mat-raised-button (click)="submitEditedData()"> Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

在你的函数中添加这一行

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

【讨论】：