html - 如何在单击角度 6 中的按钮时更改/切换 div 的类

Question

在这里，我有一个类名为的divold。我还有一个按钮onchange/toggle我需要将div 的类名更改为 .new再次单击按钮我需要将 div 的类更改为.so on .. 在角度 6 中。这是下面的代码，

实际上我是 Angular 6 的新手，任何人都可以帮助我。

app.component.html

<button (click)="change()">change</button>
<div class="old">
  Hello
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  change(){
    alert('change');
  }

  ngOnInit() {

}
}

标签： htmlangular

Answer 1

您可以使用布尔变量和ngClass指令来实现。

模板：

<button (click)="change()">change</button>
<div [ngClass]="{'old': toggle, 'new': !toggle}"class="old">
  Hello
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  toggle:boolean = true;


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

  ngOnInit() {

  }
}

Stackblitz 演示