在Angular中如何为Swal弹窗的OK按钮添加页面跳转链接

实现方案 #

步骤1：导入并注入Angular路由服务 #

首先在你的组件TS文件头部引入路由服务，同时在构造函数中完成注入：

// 顶部导入路由
import { Router } from '@angular/router';

// 组件类中注入
constructor(private router: Router) { }

步骤2：修改pay方法监听Swal确认事件 #

Swal.fire本身会返回Promise对象，你可以通过then回调监听用户点击动作，确认点击后触发路由跳转：

pay(){
    Swal.fire(
      `Congratulations!!🤩`,
      `<h3>The item has been added to the cart!!</h3>`,
      'success'
    ).then(result => {
      // 仅在用户点击确认按钮时触发跳转
      if (result.isConfirmed) {
        // 方括号内的路径替换为你项目实际的购物车路由地址即可
        this.router.navigate(['/cart']);
      }
    });
}

如果你需要跳转到站外购物车地址，不需要用Angular路由，可以把跳转逻辑替换为：

window.location.href = '你的完整购物车URL';

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