如何添加活动类点击角?

Question

我想更改li点击中的活动类

<pre> <li class="en active" (click)="useLanguage('fr')"></li>
<li class="sp" (click)="useLanguage('zh')"></li>
<li class="po" (click)="useLanguage('en')"></li>

在组件中，我写了函数

useLanguage(language: string) {
this.translate.use(language);
}

我想添加活动类时，点击li也必须从其他li删除。怎么办?

Answer 1

可以使用以下语法有条件地应用类:

<div [class.className]="someBoolean"><div>

所以，如果你将选择的语言存储在一个变量中，你可以这样做:

模板:

<li [class.active]="selectedLanguage==='fr'" (click)="useLanguage('fr')"></li>
<li [class.active]="selectedLanguage==='zh'" (click)="useLanguage('zh')"></li>
<li [class.active]="selectedLanguage==='en'" (click)="useLanguage('en')"></li>

组件:

selectedLanguage = 'fr';
useLanguage(language: string) {
this.translate.use(language);
this.selectedLanguage = language;
}

这是一个工作的StackBlitz演示。

Answer 2

//default lang

selectedLanguage = "fr";

//html

<li [ngClass]="{'selected-value' : selectedLanguage==='fr'}"(click)="useLanguage('fr')"></li>

//更改语言函数

useLanguage(language: string) {
this.translate.use(language);
this.selectedLanguage = language;
}