如何为Angular 2 Toast消息添加超链接？

嘿，这个需求完全可以实现！我在Angular项目里做过类似的功能，给你分享两种清晰简便的方案，不管是用常用的UI库还是自己撸一个Toast组件都能搞定～

如果咱们项目里已经在用Angular Material，那直接用它的MatSnackBar就能快速实现带超链接的Toast。它支持传入自定义组件作为Toast内容，步骤很简单：

1. 先创建一个带链接的自定义Toast组件：

import { Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';

@Component({
  template: `
    <span>{{ data.toastMessage }}</span>
    <!-- 外部链接用普通a标签，内部路由可以换成routerLink -->
    <a 
      [href]="data.linkUrl" 
      target="_blank" 
      style="margin-left: 8px; color: #ffd740; text-decoration: underline;"
    >
      {{ data.linkText }}
    </a>
  `
})
export class LinkedSnackbarComponent {
  // 接收传入的消息、链接地址和链接文本
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {}
}

2. 在需要调用Toast的组件里引入并使用：

import { MatSnackBar } from '@angular/material/snack-bar';
import { LinkedSnackbarComponent } from './linked-snackbar.component';

// 组件类里注入MatSnackBar
constructor(private snackBar: MatSnackBar) {}

// 调用方法展示带链接的Toast
showLinkedToast() {
  this.snackBar.openFromComponent(LinkedSnackbarComponent, {
    duration: 5000, // 自动关闭时长（毫秒）
    horizontalPosition: 'end', // 水平位置
    verticalPosition: 'bottom', // 垂直位置
    data: {
      toastMessage: '您有一条新的系统通知',
      linkUrl: '/system-notifications', // 这里可以是内部路由或外部URL
      linkText: '点击查看'
    }
  });
}

如果是跳转到Angular内部路由，把上面的a标签换成routerLink就行，记得在组件里导入RouterModule并配置好路由哦。

如果项目没用到Angular Material，或者想要完全自定义Toast的样式和行为，自己写一个组件也很简单：

1. 创建自定义Toast组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-custom-toast',
  template: `
    <div class="toast-wrapper" *ngIf="isVisible">
      <p class="toast-message">{{ message }}</p>
      <button 
        class="toast-link" 
        (click)="handleLinkClick()"
      >
        {{ linkText }}
      </button>
    </div>
  `,
  styles: [`
    .toast-wrapper {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 16px 24px;
      background-color: #2d2d2d;
      color: #fff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .toast-link {
      background: none;
      border: none;
      color: #ffd740;
      cursor: pointer;
      text-decoration: underline;
      font-size: inherit;
    }
  `]
})
export class CustomToastComponent {
  @Input() message: string;
  @Input() linkTarget: string; // 跳转目标：内部路由或外部URL
  @Input() linkText: string;
  @Input() isVisible = false;
  @Output() toastClosed = new EventEmitter<void>();

  constructor(private router: Router) {}

  handleLinkClick() {
    if (this.linkTarget.startsWith('http')) {
      // 外部链接，打开新窗口
      window.open(this.linkTarget, '_blank');
    } else {
      // 内部路由，用Angular Router跳转
      this.router.navigate([this.linkTarget]);
    }
    // 点击后关闭Toast
    this.isVisible = false;
    this.toastClosed.emit();
  }

  ngOnInit() {
    // 5秒后自动关闭
    setTimeout(() => {
      if (this.isVisible) {
        this.isVisible = false;
        this.toastClosed.emit();
      }
    }, 5000);
  }
}

2. 在父组件里调用这个Toast：

<!-- 父组件模板 -->
<app-custom-toast
  [message]="'订单已提交成功'"
  [linkTarget]="'/order-detail/123'"
  [linkText]="'查看订单'"
  [isVisible]="showToast"
  (toastClosed)="showToast = false"
></app-custom-toast>

<button (click)="showToast = true">展示Toast</button>

// 父组件类
showToast = false;

不管用哪种方案，核心都是让Toast的内容支持自定义HTML或组件，这样就能加入可点击的元素。如果是跳转到外部URL，用普通的a标签或者window.open；如果是内部路由跳转，用Angular的Router或routerLink就行，非常灵活。

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