案例: 一个登陆页面，连续多次点击登陆按钮，会造成多次触发提交事件，解决方式很多，但是感觉指令方式使用起来更简单，代码更简洁。

自定义click防抖指令

1.ionic4 内置指令生成一个空的指令

ionic g directive directives/debounce-click

生成文件如下:

2.书写debounce-click.directive.ts指令

import {Directive, EventEmitter, HostListener, Input, OnInit, Output} from '@angular/core';
import {Subject, Subscription} from 'rxjs';
import {debounceTime} from 'rxjs/operators';@Directive({selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {@Input() debounceTime = 500;@Output() debounceClick = new EventEmitter();private clicks = new Subject();private subscription: Subscription;constructor() { }ngOnInit(): void {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();console.log('Click from Host Element!');this.clicks.next(event);}}

3.登录页使用自定义的指令

1）在login.module.ts的声明中引入自定义的click指令
2）login.html页面中使用

其中login方法就是实现提交时候写的方法，在login.page.ts中
3）测试
ok，就不截图了

自此，大工告成！！

ionic4 click防抖指令相关推荐

Angular防抖指令——输入事件
input输入框,例如搜索框,每输入一个字符便向后台查询一遍会增加服务端负担,而且对前端的显示体验也不好:所以就需要防抖设计了,angular中的防抖可以利用rxjs中的debounceTime实现, ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
vue 接口节流_vue防抖节流之v-debounce--throttle使用指南
最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! 使用比较简单,取消利用vue注册事件,采用指令来注册事件,防抖指令v-debounce,节流指令v-debounce, ...
vue2的指令和自定义指令
目录 1. vue内置指令 1-1. v-text 1-2. v-html 1-3. v-pre 1-4. v-cloak 1-5. v-once 1-6. v-for 1-7. v-if 和 v-e ...
ionic4 混合移动开发（前世今生）
ionic 从2016年初识,经历了 ionic2 ionic3.至今 ionic4,终于在2018年7月份发布了测试版. ionic Framework 可以说得上是最接近原生app的ui组件,漂亮 ...
vue全局自定义指令
知识点:指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定元素插入父节点时调用(父节点 ...
多次重复点击，只触发一次（vue指令实现）
使用场景: 提交表单的时候,只有在表单成功提交之后,才能下一次提交,处于网络请求中的时候,不能够提交. 付款的时候,只能够付一次,同样处于网络请求中,不能够提交等等优点(也算是吧): 相对于使用防抖 ...
第二章—v-directive自定义指令
v-directive自定义构造器介绍: 注册或获取全局指令. 平时大家在用vue开发项目的时候大多会用到一些官方指令,例如: v-for/v-if/v-else/v-else-if/v-model ...
常见的前端考试面试题目【vue，react，css，six】
常见的vue,javascript,css前端面试题 1.Vue2和Vue3的区别至少说5点 2.Vue3中组件通信的流程[父传子,子传父] 3.Apply/call/bind的原理是什么? 4.说说 ...
【干货分享】一篇文章帮你搞定前端高频面试题
前言如今前端技术日新月异.对于前端开发人员来说,不仅需要掌握最新的前沿技术,还需要保持对基础知识的熟练掌握.而面试则是进入优秀企业的必经之路.在面试中,高频面试题的掌握是获得成功的关键.本文将为大家 ...

ionic4 click防抖指令

自定义click防抖指令

1.ionic4 内置指令生成一个空的指令

2.书写debounce-click.directive.ts指令

3.登录页使用自定义的指令

ionic4 click防抖指令相关推荐

最新文章

热门文章