如何仅用CSS或ngClass实现点击切换图标？（Angular项目）

当然可以不用jQuery啦！在Angular项目里，咱们用ngClass配合一点点组件逻辑就能轻松实现点击切换密码图标的功能，完全适配你的技术栈（Font Awesome 5 + Bootstrap 4）。下面给你具体的实现方案：

1. 组件TS逻辑 #

先在组件里定义一个控制密码显示状态的变量，再写一个切换状态的方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 控制密码是否可见的状态变量，初始为隐藏
  showPassword = false;

  // 切换密码可见性的方法
  togglePasswordVisibility(): void {
    this.showPassword = !this.showPassword;
  }
}

2. HTML模板（结合Bootstrap 4布局） #

调整你原有的HTML结构，加入切换按钮，用ngClass动态切换Font Awesome图标，同时绑定输入框的type属性：

<div class="form-group row">
  <div class="input-group">
    <label for="password" class="col-md-3 col-form-label">Password</label>
    <input 
      [type]="showPassword ? 'text' : 'password'" 
      name="password" 
      id="password" 
      class="form-control"
      placeholder="Enter your password"
    >
    <!-- 切换图标按钮 -->
    <div class="input-group-append">
      <button 
        type="button" 
        class="btn btn-outline-secondary" 
        (click)="togglePasswordVisibility()"
        aria-label="Toggle password visibility"
      >
        <!-- 用ngClass动态切换图标 -->
        <i [ngClass]="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
      </button>
    </div>
  </div>
</div>

3. 可选CSS优化（让图标更贴合输入框） #

如果觉得按钮样式有点突兀，可以加一点CSS调整：

.input-group-append .btn {
  border-left: none;
  border-radius: 0 0.25rem 0.25rem 0;
}

.input-group-append .btn:hover {
  background-color: #f8f9fa;
}

这里完全不需要依赖jQuery：

• 用[ngClass]根据showPassword的布尔值，动态切换Font Awesome的fa-eye（显示密码）和fa-eye-slash（隐藏密码）图标类
• 用[type]绑定输入框的类型，根据状态切换password和text
• 点击事件直接调用Angular组件里的方法，实现状态切换

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