Disabilitare un pulsante una volta fatto clic in Angular2

Question

Ho un problema sciocco ma non sapevo come superarlo dato che sto usando lo Angular2 (Typescript) stuffs non gli strumenti JavaScript. Ho questo codice HTML

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

Semplicemente, voglio cambiare lo stato pulsante per disabled una volta cliccato, ho trovato modi Javascript, ma nessuno di loro ha lavorato per me, qualsiasi aiuto per favore?

Answer 1

È possibile utilizzare seguente approccio senza toccare il componente,

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

Answer 2

sto usando Angular2-RC2. Ecco come uso * ngIf, forse aiuta. NOTA: in questo esempio, una volta premuto il pulsante, sarà disabilitato, quindi non è possibile fare clic su di esso per chiamare più la funzione unpushMe().

di testo 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

Si potrebbe utilizzare direttiva ngClass a che fare con le classi:

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

un'altra soluzione con codice lato:

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