如何根据Angular中的按钮类更改点击功能

Question

在 Angular 中，我有一个切换类的按钮 - 我想要做的是基于按钮类添加事件。这应该通过If函数中的语句来完成吗？到目前为止，我的代码如下：HTML 按钮<!-- toggle button --> <button type="button" class="btn btn-primary mt-3 ml-3 btn-button" (click)="status=!status; func()" [ngClass]="{'btn-danger' : status, 'btn-primary' : !status}"  [disabled]="clicked">{{status ? 'Delete' : 'Add'}}</button><!-- toggle button -->组件.tsimport { Component } from '@angular/core';@Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {public btn: any;func () {   if (this.btn.hasClass('btn-primary')) {      alert('Primary clicked');       } else if (this.btn.hasClass('btn-danger')) {     alert('Danger clicked');       } }}

Answer 1

status您可以检查值而不是类名。

试试这样：

工作演示

.html

(click)="func()"

.ts

  func() {

    this.status = !this.status;

    if (this.status) {

      alert("Primary clicked");

    } else if (!this.status) {

      alert("Danger clicked");

    }

  }

Answer 2

你可以看看这个演示可能对你有帮助

action您可以更改财产基础课程；

<button (click)="onClick()" [ngClass]="action =='Add' ? 'btn-primary': 'btn-danger'"> {{action}}</button>

点击按钮

 onClick() {

    if(this.action == 'Add') {

      this.action = 'Delete';

      alert('Primary Clicked');

    } else {

      this.action = 'Add';

        alert('Danger clicked');    

    }

  }

Answer 3

怎么样：

<button id="myBtn" type="button" class="btn btn-primary" (click)="func()">{{buttontext}}</button>

TS

buttontext: string = 'ADD';

func () {

    let element = document.getElementById("myBtn");

    element.classList.toggle("btn-danger");

    element.classList.toggle("btn-primary");

    this.buttontext = this.buttontext === 'ADD' ? 'DELETE' : 'ADD';

}