angular使用原生拖拽页面卡顿及表单控件输入延迟怎么办
这篇文章主要为大家展示了angular使用原生拖拽页面卡顿及表单控件输入延迟怎么办,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计、做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的丹寨网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
说明
之前有一个angular项目,页面上表单不算多,也就一百来个(这个不固定,有的地方多,有的地方少),但是再输入的时候会造成输入延迟,反应不灵敏,对用户体验极其不好。还有一个功能就是拖拽功能(原生,没有使用官方中的拖拽功能),从左边拖到右边区域,拖拽区域少的时候还挺流畅,但一旦有几百上千的时候反应极其的慢
原因(?)
上面两个问题其实都和angular
的机制有关。一个双向绑定一个拖拽归根结底都是因为angular
的变化检测
angular的双向绑定主要是脏数据检查,如果大量的检查,效率比较低。(双向绑定时向zone挂载一个异步函数,对数据改变是做处理,及时将变化反馈显示在页面上)可能就会输入延迟
拖拽(也是向zone挂载异步函数)则是因为angular
对每个可移动像素的元素进行检测而且还可能涉及对dom的操作,当拖拽区域数量较为多时,绑定的函数就越多,angular
需要检测的元素区域就越来越多,处理起来就越力不从心(即使元素隐藏也不代表不会进行变化检测)
解决
- 对于双向绑定造成的输入延迟,停止使用双向绑定,改用单向绑定
- 拖拽过程angular一直检测页面变化,所以页面卡顿。我们需要做的就是设置对某些操作不跟踪变化
this.ngZone.runOutsideAngular(() => { this.dragEnter = this.rd.listen(spanDom, 'dragenter', this.dragenterHandler.bind(this)); this.dragOver = this.rd.listen(spanDom, 'dragover', (e) => { e.preventDefault(); }); this.dragLeave = this.rd.listen(spanDom, 'dragleave', this.dragLeaveHandle.bind(this)); }); this.dragDrop = this.rd.listen(spanDom, 'drop', this.dropHandler.bind(this));
对频繁的操作(如dragover)不去触发变更检测。使用NgZone
中的runOutsideAngular
方法,angular
不会对里面的变化进行跟踪。
ps:下面看下Angular 元素拖拽
- 拖动元素到指定区域
- 拖放的同时传递数据
1. 安装 ng2-drag-drop
npm install ng2-drag-drop --save
2. 模板中配置可拖拽元素
// drag.component.html
- draggable - 表明此元素时可拖拽的
- [dragData] = 'item' - 在拖动过程中将item数据从draggable到droppable
- [dragScope]="'system'" - 拖拽范围,和第三步[dropScope]="'system'"相对应;
3. 模板中配置拖拽元素所拖拽的目的地
// drag.component.ts
- droppable - 第二步中拖拽的元素都将拖拽到有droppable指令的元素内;
- (onDrop) - 当拖拽元素至此区域内后(鼠标释放后),触发onItemDrop方法,其中$event就是第二步中[dragData] = 'item'的item参数
- [dropScope]="'system'" - 和第二步的[dragScope]="'system'"对应,[dragScope]="'system'"的拖拽元素只能拖拽到 [dropScope]="'system'"元素内;
4. ts文件
// drag.component.ts export class DragComponent { const sysData = [ {id: '1', name: '拖动元素1'}, {id: '2', name: '拖动元素2'}, {id: '3', name: '拖动元素3'}, {id: '4', name: '拖动元素4'} ]; } onItemDrop(e: any) { // data为拖拽时传递的数据 - item const data = e.dragData; }
以上就是关于angular使用原生拖拽页面卡顿及表单控件输入延迟怎么办的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
文章标题:angular使用原生拖拽页面卡顿及表单控件输入延迟怎么办
文章起源:http://myzitong.com/article/jejegh.html