Angular 和 Typescript 上的 ToggleClass('active')

Question

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

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

非常感谢！

Answer 1

您可以使用类似这样的方法（[class.className]="conditionThatResolvesToABoolean"，或 [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;
  }
}

这里有一个 Sample StackBlitz 供您参考。

Answer 2

这是解决这个问题的 Typescript 代码

@Component({
      selector: 'app-navbar',
      templateUrl: './navbar.component.html',
      styleUrls: ['./navbar.component.scss']
    })
    export class NavbarComponent implements OnInit {
    
      is_active = "";
      constructor() { }
    
      ngOnInit(): void {
      }
    
      toggleNav(){
        if(this.is_active){
          this.is_active = "";
        }
        else{
          this.is_active = "is-active";
        }
      }
    
    }

这是我的方法现在我们可以在 html 代码

中使用 is_active 属性

<div class="navbar-burger {{is_active}}" role="button" (click)="toggleNav()" data-target="navbarExampleTransparentExample">

Answer 3

在我的例子中，我添加了 Toggle class 这样的：

Component-HTML

<button (click)="darkMode()">Dark Mode</button>

Component-TS

 darkMode() {
    const themeClass = document.querySelector('body');
    themeClass?.classList.toggle('dark-mode');
 }

它对我有用。

Angular 和 Typescript 上的 ToggleClass('active')

ToggleClass('active') on Angular and Typescript

jquery

click

button

typescript

angular