角度2 - 甜蜜警报自定义按钮单击不起作用

Question

我在Sweetalert2的页脚内创建了一个自定义按钮，如下所示。

Swal.fire({
icon: "question",
showCancelButton: true,
confirmButtonColor: "#1976d2",
cancelButtonText: "No",
confirmButtonText: "Sí",
footer: "<button (click)='withoutread()' class='btn btn-info'>Test</button>"
})
withoutread() {
console.log('hello');
}

问题：函数withoutread无法正确调用，console.log('hello')控制台中未显示hello。

那么：这段代码有什么问题？

Answer 1

工作！

Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<button id="buttonId">Test</button>'
})
document.getElementById('buttonId').onclick = function(){
alert('do Something');
}

Answer 2

您实现它的方式中的单击方法将无法访问，因为该方法withoutread()存在于 SweetAlert 实例的范围之外。

除了可用于捕获用户输入的 SweetAlert 配置外，您还可以包含第三个自定义按钮，并使用事件委派捕获点击，如此处所述

Answer 3

试试这个

footer: "<a><button (click)='withoutread()' class='btn btn-info'>Test</button></a>"

或

footer: "<a onclick='withoutread()'><button class='btn btn-info'>Test</button></a>"

Answer 4

您必须用户点击而不是(点击(。请查看下面的工作代码。

Swal.fire({
icon: "question",
showCancelButton: true,
confirmButtonColor: "#1976d2",
cancelButtonText: "No",
confirmButtonText: "Sí",
footer: "<button onclick='withoutread()' class='btn btn-info'>Test</button>"
})
function withoutread() {
alert('dd') 
}

您还可以查看 JSFiddle 链接 这里