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

最新推荐文章于 2022-11-17 14:05:54 发布

朱迪33

最新推荐文章于 2022-11-17 14:05:54 发布

阅读量338

点赞数

分类专栏： angular problem

本文链接：https://blog.csdn.net/weixin_41210256/article/details/117825480

版权

angular 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

problem

1 篇文章 0 订阅

订阅专栏

本文探讨了在前端开发中，如何处理增删改查操作时因用户连续点击导致的问题，如数据重复添加或误删。提出了两种解决方案：一是使用防抖技术，通过Angular的debounceTime实现按钮点击的延迟处理，防止短时间内多次调用接口；二是简单地禁用按钮，控制disable属性以避免点击。这两种方法有助于确保用户交互的安全性和数据一致性。

摘要由CSDN通过智能技术生成

背景说明：

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

增：又名新增、新建、添加等
删：删除
改：又名修改、更新等，很多时候会同新增公用一个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的变量根据需要变化，让按钮不可点击即可。