如何创建angular2加载指示器按钮

在Angular中创建一个加载指示器按钮通常涉及以下几个步骤：

基础概念

组件：Angular应用的基本构建块，负责管理视图和逻辑。
服务：用于共享数据和逻辑，可以在组件之间注入。
动画：Angular提供了强大的动画系统，可以用来创建平滑的UI过渡效果。

类型

旋转图标：常见的加载指示器类型，如旋转的圆圈。
进度条：显示加载进度的指示器。
骨架屏：在内容加载前显示的占位符，模拟最终内容的布局。

应用场景

表单提交：用户提交表单后显示加载指示器。
数据获取：从服务器获取数据时显示加载状态。
长时间操作：执行耗时操作（如文件上传）时提供反馈。

示例代码

以下是一个简单的Angular组件示例，展示了如何创建一个带有加载指示器的按钮：

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-loading-button',
  template: `
    <button [disabled]="isLoading" (click)="startLoading()">
      <ng-container *ngIf="!isLoading; else loadingTemplate">Click Me</ng-container>
      <ng-template #loadingTemplate>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        Loading...
      </ng-template>
    </button>
  `,
  styles: [`
    .spinner-border {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      vertical-align: text-bottom;
      border: 0.15em solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: spinner-border 0.75s linear infinite;
    }
    @keyframes spinner-border {
      to { transform: rotate(360deg); }
    }
  `]
})
export class LoadingButtonComponent {
  private isLoadingSubject = new BehaviorSubject<boolean>(false);
  isLoading$ = this.isLoadingSubject.asObservable();

  startLoading() {
    this.isLoadingSubject.next(true);
    setTimeout(() => {
      this.isLoadingSubject.next(false);
    }, 3000); // Simulate a 3-second loading process
  }
}