Angular 引导模式关闭事件不会触发模式覆盖关闭

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

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>

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

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

---

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

在Angular中，您可以使用hidden

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

---

您应该触发

单击

关闭事件按钮

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

---

谢谢这成功了！你能告诉我发生这种事的原因吗

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

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

<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();
}