一旦在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

我使用的是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; 
}