我正在尝试将 CSS 类仅应用于单击的按钮（以将其设置为活动状态）。
这是我的代码：
过滤器.component.html
<div class="button-container">
<button class="rules" [class.active]="active" (click)="toggleActive()" type="button">Rules</button>
<button class="dailies" [class.active]="active" (click)="toggleActive()" type="button">Dailies</button>
<button class="emotions" [class.active]="active" (click)="toggleActive()" type="button">Emotions</button>
</div>
filter.component.ts
export class FilterComponent {
active: boolean = false;
toggleActive(): void {
this.active = !this.active;
}
constructor() {}
}
我的问题是，该类被应用于所有 3 个按钮。每个按钮上的活动类看起来都不一样。我怎样才能解决这个问题？
你可以这样做：
模板方面：
<div class="button-container">
<button class="rules" [class.active]="active.rules" (click)="toggleActive('rules')" type="button">Rules</button>
<button class="dailies" [class.active]="active.dailies" (click)="toggleActive('dailies')" type="button">Dailies</button>
<button class="emotions" [class.active]="active.emotions" (click)="toggleActive('emotions')" type="button">Emotions</button>
</div>
组件端：
active = {};
toggleActive(el): void {
this.active[el] = this.active[el] ? false : true;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句