说明说明说明之前有一个angular项目,页面上表单不算多，也就一百来个（这个不固定，有的地方多，有的地方少），但是再输入的时候会造成输入延迟，反应不灵敏，对用户体验极其不好。还有一个功能就是拖拽功能（原生，没有使用官方中的拖拽功能），从左边拖到右边区域，拖拽区域少的时候还挺流畅，但一旦有几百上千的时候反应极其的慢原因(?)原因(?)原因(?)上面两个问题其实都和angular的机制有关。一个双向绑定一个拖拽归根结底都是因为angular的变化检测angularangularangular的双向绑定主要是脏数据检查，如果大量的检查，效率比较低。（双向绑定时向zone挂载一个异步函数，对数据改变是做处理，及时将变化反馈显示在页面上）可能就会输入延迟拖拽（也是向zone挂载异步函数）则是因为angular对每个可移动像素的元素进行检测而且还可能涉及对dom的操作，当拖拽区域数量较为多时，绑定的函数就越多，angular需要检测的元素区域就越来越多，处理起来就越力不从心（即使元素隐藏也不代表不会进行变化检测）angularangular解决
解决
解决


对于双向绑定造成的输入延迟，停止使用双向绑定，改用单向绑定

拖拽过程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));
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不会对里面的变化进行跟踪。NgZonerunOutsideAngularangularps:下面看下Angular 元素拖拽ps:下面看下Angular 元素拖拽ps:下面看下Angular 元素拖拽

拖动元素到指定区域

拖放的同时传递数据
拖动元素到指定区域拖放的同时传递数据1. 安装 ng2-drag-drop
npm install ng2-drag-drop --save
npm install ng2-drag-drop --save2. 模板中配置可拖拽元素
// drag.component.html

// drag.component.html


draggable - 表明此元素时可拖拽的

[dragData] = 'item' - 在拖动过程中将item数据从draggable到droppable

[dragScope]="'system'" - 拖拽范围，和第三步[dropScope]="'system'"相对应；
draggable - 表明此元素时可拖拽的[dragData] = 'item' - 在拖动过程中将item数据从draggable到droppable[dragScope]="'system'" - 拖拽范围，和第三步[dropScope]="'system'"相对应；3. 模板中配置拖拽元素所拖拽的目的地
// drag.component.ts

// drag.component.ts


droppable - 第二步中拖拽的元素都将拖拽到有droppable指令的元素内；

(onDrop) - 当拖拽元素至此区域内后(鼠标释放后)，触发onItemDrop方法，其中$event就是第二步中[dragData] = 'item'的item参数

[dropScope]="'system'" - 和第二步的[dragScope]="'system'"对应，[dragScope]="'system'"的拖拽元素只能拖拽到 [dropScope]="'system'"元素内；
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;
}
// 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;
}总结总结总结