Question

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

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

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

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>

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

Answer 1

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

Answer 2

您应该触发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();
}

Bootstrap模式关闭事件不会触发模式覆盖的关闭

2 个答案: