解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
(编辑：jimmy 日期: 2024/11/26 浏览：3 次 )
说明
之前有一个angular项目,页面上表单不算多，也就一百来个（这个不固定，有的地方多，有的地方少），但是再输入的时候会造成输入延迟，反应不灵敏，对用户体验极其不好。还有一个功能就是拖拽功能（原生，没有使用官方中的拖拽功能），从左边拖到右边区域，拖拽区域少的时候还挺流畅，但一旦有几百上千的时候反应极其的慢
原因("color: #ff0000">解决
- 对于双向绑定造成的输入延迟，停止使用双向绑定，改用单向绑定
- 拖拽过程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
<div>
<a href="javascript:;" rel="external nofollow" *ngFor="let item of sysData" draggable [dragData]="item" [dragScope]="'system'">{{ item.name }}</a>
</div>
- draggable - 表明此元素时可拖拽的
- [dragData] = 'item' - 在拖动过程中将item数据从draggable到droppable
- [dragScope]="'system'" - 拖拽范围，和第三步[dropScope]="'system'"相对应；
3. 模板中配置拖拽元素所拖拽的目的地
// drag.component.ts <div droppable (onDrop)="onItemDrop($event)" [dropScope]="'system'"></div>
- 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;
}
总结
下一篇：javascript设计模式 – 策略模式原理与用法实例分析