angular - Angular添加和删除由没有jquery的方法触发的类

Question

我有一些代码要与 animate.css 一起使用，以在 div 中添加和删除类。

这是代码：

app.component.html

<button (click)="toggleMethod()">Toggle Classes</button>

<div class="myDiv">
    // Stuff here
</div>

app.component.ts

toggle = false;


toggleMethod() {
    
    if (this.toggle === true) {
        //Do this without JQ $('.myDiv').removeClass('animate__animated animate__fadeInLeft');
    } else if (this.toggle === false) {
      //Do this without JQ $('.myDiv').addClass('animate__animated animate__fadeInLeft');
    }
    this.toggle = !this.toggle; 
  
}

在不使用 jQuery（Angular 方式）的情况下如何执行上述操作？

Answer 1

对于 Angular 而不是 angularjs，请尝试：

app.component.html

<button (click)="toggleMethod()">Toggle Classes</button>  
<div class="myDiv" [class]="{'animate__animated': toggle, 'animate__fadeInLeft': toggle}">
    // Stuff here
</div>

app.component.ts

toggle: boolean = false;

toggleMethod() {
    this.toggle = !this.toggle;      
}