Angular 和 Typescript 上的 ToggleClass('active')

Question

任何人都知道我如何用 Angular 做这样的事情？

$('button').click(function(){
  $('button').toggleClass('active');
  $('.title').toggleClass('active');
  $('nav').toggleClass('active');
});

非常感谢！

Answer 1

你可以使用这样的东西( [class.className]="conditionThatResolvesToABoolean", or [ngClass]) 来做到这一点：

<div [class.active]="classApplied">
  Here's some text
  <button (click)="toggleClass()">Toggle Class</button>
</div>

在您的模板中：

import { Component } from '@angular/core';

@Component({...})
export class AppComponent  {
  classApplied = false;

  toggleClass() {
    this.classApplied = !this.classApplied;
  }
}

这是供您参考的示例 StackBlitz。