如何在Angular中实现鼠标悬停时切换按钮文本

步骤1：调整数据结构 #

给availableTime数组中的每个对象添加悬停时显示的文本字段，比如hoverValue：

// 组件.ts文件中
availableTime = [
  { value: '原文本1', hoverValue: '悬停文本1' },
  { value: '原文本2', hoverValue: '悬停文本2' },
  // 根据实际需求补充其他项
];

步骤2：添加悬停状态跟踪 #

在组件类中定义数组，记录每个按钮的悬停状态：

// 组件.ts文件中
isButtonHovered: boolean[] = [];

ngOnInit(): void {
  // 初始化状态数组，长度与availableTime一致，默认未悬停
  this.isButtonHovered = new Array(this.availableTime.length).fill(false);
}

步骤3：修改模板绑定事件与文本 #

给按钮绑定鼠标进入/离开事件，切换对应索引的状态，根据状态显示不同文本：

<button
  type="submit"
  class="btn"
  *ngFor="let available of availableTime; let i = index"
  (mouseenter)="isButtonHovered[i] = true"
  (mouseleave)="isButtonHovered[i] = false"
>
  {{ isButtonHovered[i] ? available.hoverValue : available.value }}
</button>

可选：CSS静态文本实现方案 #

如果悬停文本是固定值，也可以用CSS结合data属性实现，无需JS：

<button
  type="submit"
  class="btn"
  *ngFor="let available of availableTime"
  data-hover-text="固定悬停文本"
>
  <span>{{ available.value }}</span>
</button>

.btn::after {
  content: attr(data-hover-text);
  display: none;
}

.btn:hover::after {
  display: inline;
}

.btn:hover span {
  display: none;
}

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