Angular中点击<li>元素切换active类的实现方法

开发者阿泽

2026-4-30

实现Angular中点击

切换active类的方法

我来给你说个贴合需求又符合Angular风格的实现方式，不用手动操作DOM，靠数据绑定就能轻松搞定：

步骤1：在组件中维护当前选中的
标识

首先在你的组件类里添加一个变量，用来记录当前被点击激活的

的标识（比如用每个li的class名作为标识），初始化和默认有active类的

保持一致：

currentActiveLi: string = 'en'; // 对应第一个默认active的li

useLanguage(language: string, activeLi: string) {
  this.translate.use(language);
  // 新增这行，更新当前激活的li标识
  this.currentActiveLi = activeLi;
}

步骤2：在模板中动态绑定active类并传递标识

修改你的<li>元素，通过[ngClass]判断当前激活标识是否匹配，同时给click事件传递当前li的标识：

<!-- 去掉原来的active类，改为动态绑定 -->
<li class="en" [ngClass]="{'active': currentActiveLi === 'en'}" (click)="useLanguage('fr', 'en')"></li>
<li class="sp" [ngClass]="{'active': currentActiveLi === 'sp'}" (click)="useLanguage('zh', 'sp')"></li>
<li class="po" [ngClass]="{'active': currentActiveLi === 'po'}" (click)="useLanguage('en', 'po')"></li>