Отключить кнопку после нажатия в Angular2

у меня глупая проблема, но я не знал, как ее преодолеть, так как я использую Angular2 (Typescript) питания не JavaScript's инструменты. У меня есть этот 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, но ни один из них не работал для меня, любая помощь, пожалуйста ?

6
angular html5 typescript

4 ответов

вы можете использовать следующий подход, не касаясь вашего компонента,

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

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

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

вы можете использовать директиву 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() {
  }

}
4

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

текст-зона.деталь.ТС

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