angular5 - 如何将另一个事件绑定到angular5中甜蜜警报2模式中的关闭按钮

Question

我正在尝试在关闭甜蜜警报2 模态时添加另一个代码。因为在关闭甜蜜警报2 模态时，它首先删除内容然后才删除模态容器。所以问题是它在关闭模态之前首先显示一个空白容器。我该如何解决这个问题？

modal.component.ts

<swal  #reqCallSwal (beforeOpen)="beforeOpen($event)" (open)="onOpen($event)" [showConfirmButton]="false" [showCancelButton]="false" [showCloseButton]="true" customClass="reqCallModalSwtOuter" (close)="modalReset($event)" [allowOutsideClick]="false">
  <ng-container *swalPartial>
    <!--<div class="scrollbarToggle"></div>-->
    <div id="rcyc-modal-requestCall"  *ngIf="apiResponseBStatus && apiResponseCStatus">
      <section class="content_section">
        <div class="l-container-wrapper">
          <div class="l-container intro-header leadinto">
            <div class="l-container row">
              <div *ngIf="apiResponseBStatus" class="body-copy">
                <div class="headline-block c01_D intro-header leadinto">
                  <!-- <h4 *ngIf="apiResponseB?.field_sub_header" [title]="apiresponseB?.field_sub_header | convertHtml" [innerHtml]="apiResponseB?.field_sub_header"></h4> -->
                  <h1 *ngIf="apiResponseB?.title" [title]="apiresponseB?.title | convertHtml" class="headline" [innerHtml]="apiResponseB?.title"></h1>
                </div>
                <p *ngIf="apiResponseB?.field_summery" [innerHtml]="apiResponseB?.field_summery"></p>
              </div>
              <div class="row is-10-2">
                <div class="column is-9 lead_form_right">
                  <form  id="requestCallFormId" name="requestCallForm" [formGroup]="lead_gen_form" novalidate autocomplete="false">
                    <fieldset>

                      <div class="basic-form_group lead_form_field">
                        <!-- name_sec -->
                        <div class="row is-6-6">
                          <div class="column is-6 form_fields formContainer">
                            <label class="basic-form_label form_label basic-form_label-required">First Name</label>
                            <input id="firstNameId" class="basic-form_input basic-form_input-half" type="text" formControlName="firstname" pattern="[a-zA-Z ]*" placeholder="First Name" maxlength="30">
                            <span *ngIf="!lead_gen_form.controls.firstname.valid && !fnameWhitespaceError && lead_gen_form.controls.firstname.touched" >This field is required</span>
                            <span *ngIf="fnameWhitespaceError" [innerHtml]="fnameValidationMsg"></span>
                          </div>
                          <div class="column is-6 form_fields formContainer">
                            <label class="basic-form_label form_label basic-form_label-required">Last Name</label>
                            <input id="lastNameId" class="basic-form_input basic-form_input-half" type="text" formControlName="lastname" pattern="[a-zA-Z ]*" placeholder="Last Name" maxlength="60">
                            <span *ngIf="!lead_gen_form.controls.lastname.valid && !lnameWhitespaceError && lead_gen_form.controls.lastname.touched" >This field is required</span>
                            <span *ngIf="lnameWhitespaceError"  [innerHtml]="lnameValidationMsg"></span>
                          </div>
                        </div>
                        <!-- name_sec -->
                      </div>
                      </div>

                    </fieldset>
                  </form>
                  <div class="row is-6-6">
                    <!-- <p class="succ" *ngIf="succmsg">THANK YOU FOR REGISTERING</p> -->
                    <div class="column is-6">
                      <div class="row is-6-6">
                        <div class="column is-6 submit_btn">                                                
                          <input type="submit" id="submitId" (click)="leadGenSubmit()" [disabled]="lead_gen_form.invalid || zipcodereq || emailErr || countryerr || fnameWhitespaceError || lnameWhitespaceError || lead_gen_form.controls.country.value==0" value="Submit">
                        </div>
                        <div class="column is-6 clear_btn">
                          <input type="reset" id="resetId" (click)="ngOnInit()" value="Clear">
                        </div>
                      </div>
                    </div>
                    <div class="column is-6"></div>
                  </div>
                  <div *ngIf="apiResponseCStatus" [innerHtml]="apiResponseC.field_summery"></div>       
                </div>                              
                <div class="column is-3"></div>
              </div>
            </div>      
          </div>
        </div>
      </section>
    </div>
  </ng-container>

</swal>
<!-- <button (click)="modalOpen()">click</button> -->

在上面的代码中，我在“swalpartial”指令的帮助下将我的角度模板添加到了甜蜜的 alert2 模态中。我还借助 css 动画更改了模态的打开和关闭动画。

**modal.css**

div.swal2-show{
  /*-webkit-animation: fadein 1.3s;
  animation:fadein 1.3s;*/
  -webkit-animation:zoomin 0.5s ease-in;/* Safari, Chrome and Opera > 12.1 */
  -moz-animation:zoomin 0.5s ease-in;/* Firefox < 16 */
  -ms-animation:zoomin 0.5s ease-in;/* Internet Explorer */
  -o-animation:zoomin 0.5s ease-in;/* Opera < 12.1 */
  animation:zoomin 0.5s ease-in;
}
div.swal2-hide {
  -webkit-animation:zoomin 0.5s ease-out;
  animation:zoomout 0.5s ease-in;
}

动画效果很好，但是当我关闭模态时，它会变成空白，然后动画就会起作用。我在将事件传递给甜蜜 alert2 模态的 close() 后找到了原因。关闭模态时，它会删除一个 div 元素默认其类名为“swal2-content”，其中我的所有模态内容都在此 div 内，然后只有它删除与 sweet alert2 相关的所有类。如何在关闭模态时首先防止删除“swal2-content”类？

标签： angular5sweetalert2