Angular ngx-sweetalert2 stopTimer on mouseenter

Question

使用 Angular 的 ngx-sweetalert2 包裝器。 試圖在 mouseenter 上停止甜蜜警報計時器並在 mouseleave 上恢復它。

我已經正確顯示了一個 swal，並且事件偵聽器正確附加到模態元素並在鼠標進入模態時很好地執行匿名 function。 但是，全局方法 Swal.stopTimer() 不會停止當前顯示的甜蜜警報的計時器。

hmtl:

<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">{{ this.body }}</strong>
    </div>
</swal>

ts：

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

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

Answer 1

這是指令的一個很好的例子，看看這個答案： 在 angular 材料中提升 md-card

接受的答案具有在您想要的相同事件上執行的代碼