要将ng-busy动画应用于按钮,您可以按照以下步骤操作:
npm install ng-busy --save
import { NgBusyModule, BusyConfig } from 'ng-busy';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgBusyModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppComponent {
isBusy: boolean = false;
startLoading() {
this.isBusy = true;
// 模拟加载操作,这里可以是一个异步操作
setTimeout(() => {
this.isBusy = false;
}, 3000);
}
}
在上面的代码中,[ngBusy]
指令绑定到isBusy
变量,当isBusy
为true
时,按钮将显示一个忙碌状态的动画,并显示"Loading..."消息。当isBusy
变为false
时,按钮将返回到正常状态。
这就是将ng-busy动画应用于按钮的解决方法。您可以根据您的需求自定义忙碌状态的样式和消息。