Angular TypeScript 如何修改Alert弹窗样式以区分成功/失败提示

你当前使用的alert()是浏览器原生提供的系统级弹窗，渲染逻辑完全由浏览器内置规则控制，没有开放任何自定义样式的API，无论写什么样式代码，都没法直接调整这个原生弹窗的文字颜色、背景色等外观属性，想要实现绿底成功、红底失败的提示效果，必须放弃原生alert，改用自定义DOM实现的提示组件。

• 轻量自定义实现（无第三方依赖）
  不需要引入任何外部库，在组件内通过状态变量控制提示元素的显隐和样式即可：
  1. 先在组件模板中添加固定定位的提示元素：

  <div *ngIf="isShowTip" 
       class="global-tip"
       [ngClass]="currentTipType">
    {{ tipText }}
  </div>
  

  2. 在组件的TypeScript逻辑中，替换原来的alert判断逻辑：

  // 定义提示相关的状态变量
  isShowTip = false;
  currentTipType: 'success' | 'error' = 'success';
  tipText = '';
  
  // 替换原有逻辑
  if(text != null){
    this.currentTipType = 'success';
    this.tipText = 'Success!!';
  }else{
    this.currentTipType = 'error';
    this.tipText = 'Failed!';
  }
  // 显示提示
  this.isShowTip = true;
  // 可选：设置3秒后自动隐藏提示
  setTimeout(() => {
    this.isShowTip = false;
  }, 3000)
  

  3. 编写对应样式，实现成功绿、失败红的配色：

  .global-tip {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 28px;
    border-radius: 6px;
    color: #fff;
    z-index: 9999;
  }
  /* 成功提示：绿色背景 */
  .global-tip.success {
    background: #22c55e;
  }
  /* 失败提示：红色背景 */
  .global-tip.error {
    background: #ef4444;
  }
  

• 组件库方案
  如果项目已经集成了Angular生态的UI组件库（如Angular Material、NG-ZORRO等），可以直接调用组件库自带的通知/弹窗服务，这类服务原生就支持不同提示类型的配色，直接传入success、error的类型参数，就能自动渲染对应绿、红色的提示效果，稳定性和适配性比手写的自定义组件更好。

补充说明：所有声称可以修改原生alert样式的方案，本质都是用页面DOM模拟弹窗外观，并不是真的修改了浏览器内置的alert组件，没有实际使用价值。

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