Angular ngx-sweetalert2：鼠标悬停时停止/恢复弹窗计时器失效问题

问题出在你调用了全局的Swal.stopTimer()和Swal.resumeTimer()，而ngx-sweetalert2的<swal>组件是独立的实例，全局Swal对象无法操控组件创建的弹窗实例。正确的做法是获取组件自身的实例来调用计时器控制方法。

修改步骤： #

1. 在组件类中通过@ViewChild获取<swal>组件的实例
2. 在鼠标事件回调中调用该实例的stopTimer()和resumeTimer()方法

修改后的代码： #

TS代码：

import { Component, ViewChild } from '@angular/core';
import { SwalComponent, DidOpenEvent } from '@sweetalert2/ngx-sweetalert2';

@Component({
  // 组件元数据（保持你的原有配置即可）
})
export class YourComponent {
  @ViewChild('errorContent') errorSwal!: SwalComponent;
  body = '你的弹窗内容';

  addHoverEvent(event: DidOpenEvent) {
    event.modalElement.addEventListener('mouseenter', () => {
      this.errorSwal.stopTimer();
    });

    event.modalElement.addEventListener('mouseleave', () => {
      this.errorSwal.resumeTimer();
    });
  }

  nextToast() {
    // 你的后续逻辑
  }
}

HTML代码（无需修改）：

<swal
    #errorContent
    position='top'
    [toast]=true
    icon="error"
    [timerProgressBar]="true"
    [timer]="3000"
    [showConfirmButton]="false"
    (didOpen)="addHoverEvent($event)"
    (didDestroy)="nextToast()"
    >
    <div *swalPortal="swalTargets.content">
        <strong class="d-flex justify-content-center">{{ body }}</strong>
    </div>
</swal>

原理说明： #

ngx-sweetalert2的<swal>组件内部维护了专属的SweetAlert2实例，全局Swal对象是独立的顶层实例，无法直接控制组件创建的弹窗。通过@ViewChild获取组件实例后，调用其封装的计时器方法，才能精准操控当前弹窗的计时器状态。

内容的提问来源于stack exchange，提问作者Josh