【部分通用】关于提交或删除按钮等的总结 - Angular版本

背景说明：

 

日常开发中，常用按钮(也是常用功能)包含增删改查。

• 增：又名 新增、新建、添加等
• 删：删除
• 改：又名修改、更新等，很多时候会同新增公用一个form或者说按钮
• 查：查询

查询没有对数据库进行任何修改，不需要过多考虑。

修改编辑虽然对数据库进行了改变，但是因为你填的信息不变，改变多次只是多调用几次接口，并不会报错，问题不大，但是还是应该避免；

但是另外2种的话，有几种情景会出现问题：

1、连续点击

2、网络速度慢、页面卡顿

3、其他原因，比如：你忘记在提交之后关闭窗口等；

以上情况会导致添加多条同样的数据，但是不同的id，或者同一条数据删除多次，那么删过一次再删除就没得删了，接口会报错。

解决方案：

 

方案一：防抖（通用处理方案）

摘自：angular 按钮防抖

import {
  Directive,
  EventEmitter,
  HostListener,
  Input,
  OnDestroy,
  OnInit,
  Output
} from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Directive({
  selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
  @Input() debounceTime = 500;
  @Output() debounceClick = new EventEmitter();
  private clicks = new Subject();
  private subscription: Subscription;

  constructor() {}

  ngOnInit() {
    this.subscription = this.clicks
      .pipe(debounceTime(this.debounceTime))
      .subscribe(e => this.debounceClick.emit(e));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    this.clicks.next(event);
  }
}

html使用：

<button appDebounceClick (debounceClick)="log()" [debounceTime]="700">
  Debounced Click
</button>

方案二：设置按钮不可用

利用按钮的disable

这个就不进行详细说明了，就是控制disable的变量根据需要变化，让按钮不可点击即可。