在ASP.NET MVC应用程序中,您可以使用Angular机制来实现按钮在一段时间后变灰的功能。以下是一个示例解决方法,包含了相关的代码示例:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-button-example',
templateUrl: './button-example.component.html',
styleUrls: ['./button-example.component.css']
})
export class ButtonExampleComponent implements OnInit {
isDisabled: boolean = false;
constructor() { }
ngOnInit() {
}
onClick() {
this.isDisabled = true;
setTimeout(() => {
this.isDisabled = false;
}, 5000);
}
}
import { Directive, Input, ElementRef, Renderer2, OnInit } from '@angular/core';
@Directive({
selector: '[gray-out-button]'
})
export class GrayOutButtonDirective implements OnInit {
@Input() grayOutTime: number;
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
ngOnInit() {
this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
this.renderer.setAttribute(this.elementRef.nativeElement, 'disabled', 'true');
setTimeout(() => {
this.renderer.removeAttribute(this.elementRef.nativeElement, 'disabled');
}, this.grayOutTime);
});
}
}
import { GrayOutButtonDirective } from './gray-out-button.directive';
@NgModule({
declarations: [
GrayOutButtonDirective
],
imports: [
// other imports
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
通过这个解决方法,当按钮被点击后,它会变为灰色并被禁用,然后在指定的时间(例如:5000毫秒)后恢复为可用状态。请根据您的具体需求调整代码中的时间和样式。