Question

任何人都知道如何使用Angular做类似的事情？

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

非常感谢您！

Answer 1

这是解决这个问题的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 2

您可以使用以下内容（[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。

Angular和Typescript上的ToggleClass（'active'）

2 个答案: