Событие модального закрытия Bootstrap не запускает закрытие модального наложения - PullRequest
Новая
       5

Событие модального закрытия Bootstrap не запускает закрытие модального наложения

0 голосов
/ 08 октября 2018

У меня есть сценарий, в котором я хочу добавлять новые запросы и редактировать существующие запросы, используя один компонент, и при необходимости восстанавливать его с правильными данными.Ниже приведен код для базового компонента.

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>

Я пытался отменить подписку на запрос на добавление и редактирование, но не дал желаемого эффекта.

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

Вы должны вызвать событие 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();
}
0 голосов
/ 08 октября 2018

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