Angular 2+：如何通过X按钮关闭通知Div？

当然可以搞定这个需求！不用hidden属性完全没问题，我们可以通过CSS类切换的方式来控制通知的显示和隐藏，既支持手动点击X按钮关闭，也不影响之后再次显示这个通知组件。下面给你具体的实现方案：

核心思路 #

我们不会直接修改元素的hidden属性（因为它会让元素永久隐藏，除非手动移除属性），而是通过给通知Div添加/移除自定义CSS类来控制显示状态，同时配合JavaScript处理自动消失定时器和手动关闭事件。

1. HTML结构 #

先搭建基础的通知组件，包含通知内容和关闭按钮：

<div class="notification" id="autoHideNotification">
  <p>这是会自动消失的通知消息</p>
  <button class="close-btn" id="closeNotification">×</button>
</div>

2. CSS样式 #

定义通知的默认样式，以及隐藏状态的类（这里提供两种常用方案，选一种即可）：

.notification {
  padding: 1rem 1.5rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

/* 方案1：完全隐藏（不占据页面空间） */
.notification.hidden {
  display: none;
}

/* 方案2：滑出动画（视觉体验更好，元素仍占据空间可选） */
/* .notification.hidden {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
} */

.close-btn {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  color: #6c757d;
}

.close-btn:hover {
  color: #495057;
}

3. JavaScript逻辑 #

处理自动消失的定时器，以及点击X按钮的关闭事件，同时记得清除定时器避免冲突：

const notification = document.getElementById('autoHideNotification');
const closeBtn = document.getElementById('closeNotification');

// 设置自动消失的定时器（5秒后自动隐藏）
let hideTimer = setTimeout(() => {
  notification.classList.add('hidden');
}, 5000);

// 点击X按钮手动关闭通知
closeBtn.addEventListener('click', () => {
  notification.classList.add('hidden');
  // 清除自动消失的定时器，避免点击关闭后定时器还触发
  clearTimeout(hideTimer);
});

// 如果之后需要再次显示通知，只需要移除hidden类即可
// 示例：function showNotification() {
//   notification.classList.remove('hidden');
//   // 重新设置自动消失定时器
//   hideTimer = setTimeout(() => {
//     notification.classList.add('hidden');
//   }, 5000);
// }

关键优势 #

• 完全避开hidden属性，不会导致通知无法再次显示：只要移除hidden类，通知就能立刻重新出现。
• 灵活可控：手动关闭后会清除自动定时器，不会出现“关闭后又自动弹出”的尴尬情况。
• 可扩展：CSS部分可以自定义动画效果，让通知的显示/隐藏更流畅。

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