在Angular项目中如何将自定义函数绑定到swal的自定义HTML内容上

根因说明 #

SweetAlert2的html属性传入的字符串会被直接渲染为原生DOM，不会经过Angular的模板编译流程，你写的(click)="test()"属于Angular专属的模板绑定语法，仅在Angular编译识别的模板场景下生效，因此直接写在html字段内的事件绑定不会触发。

可直接落地的解决方案 #

方案1：手动绑定原生事件（无需额外依赖） #

借助SweetAlert2提供的didOpen生命周期钩子，在弹窗渲染完成后获取自定义按钮元素，手动绑定点击事件即可：

Swal.fire({
  // 给自定义按钮加id方便获取，不需要写(click)语法
  html: `<button id="customTestBtn">Test</button>`,
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: this.translateService.instant('Common.Yes'),
  cancelButtonText: this.translateService.instant('Common.Cancel'),
  confirmButtonColor: '#00d68f',
  cancelButtonColor: '#8f9bb3',
  // 弹窗渲染完成后执行的钩子
  didOpen: () => {
    const testBtn = document.getElementById('customTestBtn');
    // 用箭头函数保证this指向当前组件实例，不需要额外bind
    testBtn?.addEventListener('click', () => {
      this.test();
      // 如果点击按钮后需要关闭弹窗，可加一行 Swal.close();
    });
  }
});

方案2：使用Angular适配的SweetAlert2封装包 #

如果项目中频繁用到Swal的自定义模板场景，推荐使用Angular官方适配的@sweetalert2/ngx-sweetalert2依赖包，支持直接用Angular组件式写法写弹窗内容，所有模板语法、事件绑定都可以正常使用，不需要手动处理事件绑定。

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