您可以使用Angular中的ngx-spinner库来显示加载旋转图标,直到方法执行完成。以下是一个示例:
npm install ngx-spinner --save
import { NgxSpinnerModule } from 'ngx-spinner';
@NgModule({
imports: [
NgxSpinnerModule
],
// ...
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
@Component({
selector: 'app-your-component',
template: `
`
})
export class YourComponent implements OnInit {
isLoading: boolean = false;
constructor(private spinner: NgxSpinnerService) { }
ngOnInit() {
this.showSpinner(); // 在方法开始执行时显示加载旋转图标
this.yourMethod().subscribe(() => {
// 在方法执行完成后隐藏加载旋转图标
this.hideSpinner();
});
}
yourMethod() {
// 在这里执行您的方法
// 例如,您可以返回一个Observable来模拟异步操作
return new Observable(observer => {
setTimeout(() => {
observer.next();
observer.complete();
}, 2000);
});
}
showSpinner() {
this.isLoading = true;
this.spinner.show();
}
hideSpinner() {
this.isLoading = false;
this.spinner.hide();
}
}
在上面的示例中,我们使用了ngx-spinner库来显示和隐藏加载旋转图标,并使用isLoading变量来控制图标的显示和隐藏。在ngOnInit方法中,我们调用了showSpinner方法来显示加载旋转图标,并在yourMethod方法执行完成后调用hideSpinner方法来隐藏加载旋转图标。
请注意,以上代码仅作为示例,您需要根据您自己的需求进行调整。