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

Sole 发表于 Dev

唯一

在 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 -->

组件.ts

import { 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');    
   }
 }
}

索拉布・亚达夫

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

您可以在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');    
    }
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。