typescript 在 Angular2 中单击后禁用按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37898758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable a button once clicked in Angular2
提问by selem mn
I have a silly problem but i didn't know how to overcome it since i'm using Angular2(Typescript) stuffs not JavaScript's tools. I have this HTML code
我有一个愚蠢的问题，但我不知道如何克服它，因为我使用的是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>
Simply , I want to change the button status to disabledonce clicked, I found Javascript ways but none of them worked for me, any Help please ?
简单地说，我想将按钮状态更改为disabled单击一次，我找到了 Javascript 方法，但没有一个对我有用，请问有什么帮助吗？
回答by codef0rmer
You can use following approach without touching your component,
您可以在不接触组件的情况下使用以下方法，
<a class="md-btn md-btn-success"
[class.disabled]="isClickedOnce"
(click)="isClickedOnce = true">Start</a>
回答by sa_
another solution with code side:
代码方面的另一个解决方案：
<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;
}
回答by Rafa Garrido
You could use ngClass directive to deal with classes:
您可以使用 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() {
}
}
回答by peter z.
i'm using Angular2-RC2. This is how i use *ngIf, maybe it helps. NOTE: in this example, once the button is pressed, it will be disabled, so you cannot click it to call the function unpushMe() anymore.
我正在使用 Angular2-RC2。这就是我使用 *ngIf 的方式，也许它会有所帮助。注意：在这个例子中，一旦按钮被按下，它就会被禁用，所以你不能再点击它来调用函数 unpushMe()。
text-area.component.ts
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;
}
}
