在Angular2中单击一次禁用按钮

Question

我有一个愚蠢的问题,但我不知道如何克服它,因为我使用Angular2(Typescript)东西不是JavaScript工具.我有这个HTML代码

<div  class=" uk-align-center" >
 <a class="md-btn md-btn-success" >Start</a>
<!--<a class="md-btn disabled" *ngIf="">Start</a>-->
</div>

简单地说,我想将按钮状态更改为disabled一次点击,我发现了Javascript方式,但没有一个对我有用,请帮忙吗？

Answer 1

您可以使用以下方法而无需触摸组件,

<a class="md-btn md-btn-success"
   [class.disabled]="isClickedOnce"
   (click)="isClickedOnce = true">Start</a>

Answer 2

代码方的另一个解决方案:

<button name="submitButton" #submitButton type="submit" class="btn btn-primary" (click)="onButtonClick()">Submit</button>

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('submitButton') submitButton:ElementRef;

onButtonClick()
{
    this.submitButton.nativeElement.disabled = true;
    //Do some other stuff, maybe call a service etc...
    this.submitButton.nativeElement.disabled = false;
}

Answer 3

您可以使用 ngClass 指令来处理类：

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

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div class=" uk-align-center" >
       <a [ngClass]="{'md-btn md-btn-success': !isButtonDisabled,
                      'md-btn disabled': isButtonDisabled }" 
          (click)="isButtonDisabled = !isButtonDisabled;">Start</a>
      </div>
    </div>
  `,
  styles: [
  `
  .md-btn md-btn-success {
    ...
  }
  .md-btn disabled {
    ...
  }
  `
 ]
})
export class App {
  isButtonDisabled: false;

  constructor() {
  }

}