1 回答

TA貢獻1831條經驗 獲得超9個贊
您可以像下面一樣使用@ViewChild()andElementRef和classList
<div #someelementone class="some-element-class toggle-class-one">
Test
</div>
<div #someelementtwo class="some-element-class toggle-class-two">
Tes2
</div>
<div #someelementthree class="some-element-class toggle-class-three">
Tes3
</div>
<button (click)="updateElementClasses()">Toggle Classes</button>
在 ts 文件中
export class AppComponent {
@ViewChild('someelementone') someElementOne: ElementRef;
@ViewChild('someelementtwo') someElementTwo: ElementRef;
@ViewChild('someelementthree') someElementThree: ElementRef;
updateElementClasses() {
this.toggleClass(this.someElementOne, 'toggle-class-one');
this.toggleClass(this.someElementTwo, 'toggle-class-two');
this.toggleClass(this.someElementThree, 'toggle-class-three');
}
toggleClass(eleRef: ElementRef, classStr: string) {
eleRef.nativeElement.classList.toggle(classStr);
}
}
你可以從這里找到正在工作的 Stackblitz
對于classListAPI,有兩種方法add()和remove(). 您可以在其中添加和刪除特定元素的類
添加回答
舉報