在Angular2中单击后禁用按钮答案

【问题标题】：Disable a button once clicked in Angular2在Angular2中单击后禁用按钮
【发布时间】：2016-10-20 07:21:14
【问题描述】：

我有一个愚蠢的问题，但我不知道如何克服它，因为我使用的是 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 方式，但它们都不适合我，请帮助？

【问题讨论】：

标签： html typescript angular

【解决方案1】：

另一种代码方面的解决方案：

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

【讨论】：

如果您想根据任何其他操作执行禁用/启用按钮，这是正确的解决方案。

【解决方案2】：

您可以在不接触组件的情况下使用以下方法，

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

【讨论】：

【解决方案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() {
  }

}

【讨论】：

【解决方案4】：

我正在使用 Angular2-RC2。这就是我使用 *ngIf 的方式，也许它会有所帮助。注意：在本例中，一旦按钮被按下，它将被禁用，因此您不能再单击它来调用函数 unpushMe()。

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

【讨论】：

完美，谢谢 :)