网络编程 发布日期：2025/11/3 浏览次数：1
说明
之前有一个angular项目,页面上表单不算多，也就一百来个（这个不固定，有的地方多，有的地方少），但是再输入的时候会造成输入延迟，反应不灵敏，对用户体验极其不好。还有一个功能就是拖拽功能（原生，没有使用官方中的拖拽功能），从左边拖到右边区域，拖拽区域少的时候还挺流畅，但一旦有几百上千的时候反应极其的慢
原因("color: #ff0000">解决
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>
3. 模板中配置拖拽元素所拖拽的目的地
// drag.component.ts <div droppable (onDrop)="onItemDrop($event)" [dropScope]="'system'"></div>
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;
}
总结