[Angular] 避免連點重複送出請求的方式
在Angualr中，经常需要处理多次短时间重复点击提交等操作；比如，页面的一些操作需要经常提交请求到后台处理数据，或者搜索功能对于每一个输入的字符都到后端搜索处理返回结果，对短时间内频繁的重复提交来说，我们只需要这段时间内最后一次的提交请求；否则这些无效的网络请求会加大服务器的负担；在angular中，我们可以通过创建一个延时执行的click的directive来处理这种情况； 1>首先需要定义个directive，监听当前元素的click事件； import { Directive, HostListener, OnInit } from '@angular/core'; @Directive({ selector: '[appDebounceClick]' }) export class DebounceClickDirective implements OnInit { constructor() { } ngOnInit() { } @HostListener('click', ['$event']) clickEvent(event) { event.preventDefault(); event.stopPropagation(); console.log('Click from Host Element!'); } } HostListener这个装饰器可以监听directive作用的dom元素的click事件，第二个参数$event告诉Angular传递点击事件到directive中去； event.preventDefault();event.stopPropagation() 防止事件继续向parent component中传递； 2>Debounce Events 我们需要拦截点击事件然后延迟这些点击事件的执行，直到一段时间内最后一次点击，最后把事件的处理操作交给parent来处理； import { Directive, EventEmitter, HostListene...