黄兵的个人博客

Angular 提交 按钮加载，button 加载mat-spinner动画

最近在使用Angular，每当修改内容提交的时候，禁止用户再次点击，这个时候需要将按钮变成disabled状态。

具体实现效果如下：

具体代码如下：

css样式：

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  border-top-color: #000000;
  animation: spinner .8s linear infinite;
}

button按钮代码：

<ng-container *ngIf="isLoading$ | async">
    <button type="submit" class="btn btn-primary font-weight-bold mr-2 spinner" disabled>Save</button>
</ng-container>
<ng-container *ngIf="!(isLoading$ | async)">
    <button type="submit" class="btn btn-primary font-weight-bold mr-2"
            [disabled]="menuChildFormGroup.invalid"
            (click)="childSave($event)">Save
    </button>
</ng-container>

typescript代码：

export class AddMenuComponent implements OnDestroy {
    loadMenuParent: MenuModel[];
    private sub: Subscription;
    isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
    error: string;

    validateForm(form) {
        if (form.invalid) {
            FormUtil.touchForm(form);
            FormUtil.dirtyForm(form);

            return false;
        }
        return true;
    }

    public childSave($event): void {
        // 保存子菜单内容
        if (!this.validateForm(this.menuChildFormGroup)) {
            return;
        }
        this.isLoading$.next(true);
        this.sub = this.menuService.addChildMenu(this.menuChildParentIdFormControl.value, this.menuChildNameFormControl.value,
            this.menuChildUriFormControl.value, this.menuChildRankFormControl.value)
            .subscribe(data => {
                if (data.returnResult === 'ok') {
                    this.route.navigate(['/system/setting/menu']);
                }
            }, error => {
                this.error = error;
            }, () => {
                this.isLoading$.next(false);
            });
    }

    ngOnDestroy() {
        if (this.sub) {
            this.sub.unsubscribe();
        }
    }
}

参考资料：

1、How to add a loading spinner to an Angular Material button

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - Angular 提交 按钮加载，button 加载mat-spinner动画