Angular: 在按钮点击时显示加载图标_编程开发

Angular: 在按钮点击时显示加载图标

创始人

2024-10-23 01:31:12

0次

在Angular中，可以使用一个布尔类型的变量来控制加载图标的显示与隐藏。下面是一个示例解决方法：

在组件的HTML文件中，使用ngIf指令根据变量的值来决定是否显示加载图标：

在组件的CSS文件中，定义加载图标的样式：

.loading-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('loading.gif');
  /* 其他样式设置，例如动画效果等 */
}

在组件的TypeScript文件中，定义isLoading变量，并在按钮点击事件中更新isLoading的值：

export class MyComponent {
  isLoading: boolean = false;

  onClick() {
    this.isLoading = true;

    // 模拟异步操作
    setTimeout(() => {
      // 完成操作后，隐藏加载图标
      this.isLoading = false;
    }, 2000);
  }
}

在上面的示例中，当用户点击按钮时，isLoading变量的值被设置为true，加载图标就会显示出来。在模拟的异步操作完成后，isLoading变量的值被设置为false，加载图标就会隐藏起来。

上一篇：Angular: 在.subscribe()内部返回字符串会导致无限的xhr请求

下一篇：Angular: 在AuthGuard中处理浏览器刷新

Angular: 在按钮点击时显示加载图标

相关内容

热门资讯