Dezaktywuj przycisk po kliknięciu w Angular2

Question

Mam głupi problem, ale nie wiedziałem, jak go pokonać, ponieważ używam narzędzi Angular2 (Typescript) nie narzędzi JavaScript. Mam ten kod HTML

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

Po prostu chcę, aby zmienić status przycisk disabled po kliknięciu znalazłem sposoby JavaScript, ale żaden z nich nie pracował dla mnie, każdy pomóc proszę?

Answer 1

można użyć następujące podejście bez dotykania komponentu

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

Answer 2

Używam Angular2-RC2. W ten sposób używam * ngIf, może to pomaga. UWAGA: w tym przykładzie po naciśnięciu przycisku zostanie on wyłączony, więc nie można go kliknąć, aby wywołać funkcję unpushMe().

tekstowe 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

Można użyć dyrektywy ngClass do czynienia z klasami:

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

inne rozwiązanie ze stroną kodową:

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