Отключить кнопку после щелчка мышью в Angular2

Question

У меня есть глупая проблема, но я не знал, как ее преодолеть, так как я использую Angular2 (Typescript) stuffs not 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

Я использую Angular2-RC2. Вот как я использую * ngIf, может быть, это помогает. ПРИМЕЧАНИЕ: в этом примере после нажатия кнопки он будет отключен, поэтому вы не сможете щелкнуть его, чтобы вызвать функцию unpushMe().

текстового area.component.ts

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

    @Component({ 
    selector: 'textarea-comp', 
    template: ` 
     <div> 
      <div *ngIf="!isPushed" > 
       <p><button (click)="pushMe()">push2disable</button></p> 
     </div> 
     <div *ngIf="isPushed" > 
       <p><button (click)="unPushMe()" disabled >disabled</button></p> 
     </div> 
    ` 
    }) 

    export class TextAreaComponent { 
      isPushed: boolean = false; 


    pushMe() { 
      this.isPushed = true; 
     } 
     unPushMe() { 
      this.isPushed = 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() { 
    } 

} 

Answer 4

другое решение с кодом сторона:

<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; 
}