Angular 11实现点击图标切换类名（fa-eye与fa-eye-slash互切）

实现步骤 #

1. 组件TypeScript文件定义状态 #

在你的组件类中新增布尔状态变量，用来标记当前的图标显示状态，默认设为true对应睁眼图标：

// 组件类内部代码
isEyeOpen = true;

如果后续需要和其他逻辑联动（比如同步切换密码输入框的显隐），可以把状态切换逻辑抽成独立方法：

// 可选：封装切换方法，方便扩展联动逻辑
toggleIconState() {
  this.isEyeOpen = !this.isEyeOpen;
  // 关联逻辑可追加在这里，例如：
  // this.passwordInputType = this.isEyeOpen ? 'text' : 'password';
}

2. HTML模板绑定动态类与点击事件 #

利用Angular的类绑定能力，根据状态变量动态切换对应的图标类，同时绑定点击事件触发状态变更：

写法1：单类绑定（逻辑清晰易读）

<i 
  class="fa" 
  [class.fa-eye]="isEyeOpen" 
  [class.fa-eye-slash]="!isEyeOpen"
  aria-hidden="true"
  (click)="isEyeOpen = !isEyeOpen"
></i>

如果使用刚才封装的切换方法，点击事件替换为(click)="toggleIconState()"即可。

写法2：ngClass批量绑定（适合类较多的场景）

<i 
  class="fa" 
  [ngClass]="{ 'fa-eye': isEyeOpen, 'fa-eye-slash': !isEyeOpen }"
  aria-hidden="true"
  (click)="toggleIconState()"
></i>

两种写法效果完全一致，不需要手动操作DOM，状态变更后Angular会自动更新元素的类名。

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