在Angular中,可以使用一个布尔类型的变量来控制加载图标的显示与隐藏。下面是一个示例解决方法:
.loading-icon {
display: inline-block;
width: 20px;
height: 20px;
background-image: url('loading.gif');
/* 其他样式设置,例如动画效果等 */
}
export class MyComponent {
isLoading: boolean = false;
onClick() {
this.isLoading = true;
// 模拟异步操作
setTimeout(() => {
// 完成操作后,隐藏加载图标
this.isLoading = false;
}, 2000);
}
}
在上面的示例中,当用户点击按钮时,isLoading变量的值被设置为true,加载图标就会显示出来。在模拟的异步操作完成后,isLoading变量的值被设置为false,加载图标就会隐藏起来。