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

代码方的另一个解决方案：

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

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

我正在使用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; } }

在Angular2中单击一次禁用按钮

4 个答案: