Angular中实现点击按钮后仅显示数秒的div通知

算力阿峰

2026-7-24

实现Angular点击按钮触发临时通知展示

下面是直接可用的实现方案，分步骤说明：

1. 组件类逻辑

在你的组件.ts文件中，定义控制通知显示的变量、触发方法，同时处理定时器清理避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-notification-demo',
  templateUrl: './notification-demo.component.html',
  styleUrls: ['./notification-demo.component.css']
})
export class NotificationDemoComponent implements OnInit, OnDestroy {
  showNotification = false;
  private notificationTimer?: number;

  ngOnInit(): void { }

  ngOnDestroy(): void {
    // 组件销毁时清理定时器
    if (this.notificationTimer) {
      clearTimeout(this.notificationTimer);
    }
  }

  triggerNotification(): void {
    // 先清除之前的定时器，避免多次点击冲突
    if (this.notificationTimer) {
      clearTimeout(this.notificationTimer);
    }
    // 显示通知
    this.showNotification = true;
    // 3秒后自动隐藏（时间可自行调整）
    this.notificationTimer = window.setTimeout(() => {
      this.showNotification = false;
    }, 3000);
  }
}

2. 模板代码

在组件的.html文件中，添加触发按钮和通知容器，用*ngIf控制显示状态：

<button (click)="triggerNotification()">点击显示通知</button>

<!-- 临时通知容器 -->
<div *ngIf="showNotification" class="notification">
  这是一条临时通知，3秒后自动消失！
</div>

3. 样式设置

在组件的.css文件中给通知添加基础样式，让它更贴近常规通知的视觉效果：

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 25px;
  background-color: #2ecc71;
  color: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1000;
}