illustrate
There was an angular project before, and there were not many forms on the page, only about one hundred (this is not fixed, there are many places and few places), but when input again, it will cause input delays, insensitive response, and extremely bad for user experience. Another function is the drag function (native, no official drag function). Drag from the left to the right area. When there are fewer drag areas, it is quite smooth, but when there are hundreds or thousands, the reaction is extremely slow.
reason(?)
The above two questions are actually the sameangularThe mechanism is related. One two-way binding and one dragging are ultimately becauseangularChange detection
The two-way binding of angular is mainly dirty data checking, and if there are a large number of checks, the efficiency is relatively low. (In bidirectional binding, an asynchronous function is mounted to the zone. The data changes are processed and the changes are displayed on the page in time) A delay may be entered.
Drag and drop (also mount asynchronous functions to zone) is becauseangularDetection of elements of each movable pixel may also involve operations on the dom. When the number of dragged areas is large, the more functions are bound.angularThere are more and more areas of element detection, and the less effort you will be able to process it (even if the element is hidden, it does not mean that there will be no change detection)
solve
- For input delay caused by bidirectional binding, stop using bidirectional binding and switch to one-way binding
- The drag and drop process angular always detects page changes, so the page is stuck. All we need to do is set not to track changes for certain operations
(() => {
= (spanDom, 'dragenter', (this));
= (spanDom, 'dragover', (e) => {
();
});
= (spanDom, 'dragleave', (this));
});
= (spanDom, 'drop', (this));
Do not trigger change detection for frequent operations (such as dragover). useNgZoneIn-houserunOutsideAngularmethod,angularThe changes inside will not be tracked.
ps: Let's take a look at the Angular element dragging
- Drag the element to the specified area
- Pass data while dragging and dropping
1. Install ng2-drag-drop
npm install ng2-drag-drop --save
2. Configure draggable elements in the template
//
<div>
<a href="javascript:;" rel="external nofollow" *ngFor="let item of sysData" draggable [dragData]="item" [dragScope]="'system'">{{ }}</a>
</div>
- draggable - indicates that this element can be dragged
- [dragData] = 'item' - transfer item data from draggable to droppable during dragging
- [dragScope]="'system'" - The drag range corresponds to the third step [dropScope]="'system'";
3. Configure the destination of dragging elements in the template
// <div droppable (onDrop)="onItemDrop($event)" [dropScope]="'system'"></div>
- droppable - All elements dragged in the second step will be dragged into the element with the droppable directive;
- (onDrop) - When the element is dragged into this area (after the mouse is released), the onItemDrop method is triggered, where $event is the item parameter of [dragData] = 'item' in the second step
- [dropScope]="'system'" - Corresponding to the second step [dragScope]="'system'" , the drag element of [dragScope]="'system'" can only be dragged into the [dropScope]="'system'" element;
4. ts file
//
export class DragComponent {
const sysData = [
{id: '1', name: 'Drag element 1'},
{id: '2', name: 'Drag Element 2'},
{id: '3', name: 'Drag Element 3'},
{id: '4', name: 'Drag Element 4'}
];
}
onItemDrop(e: any) {
// data is the data passed during dragging and dropping - item const data = ;
}
Summarize
This article about using native drag pages in angular and delayed input of form controls is introduced here. For more related articles in angular and delayed input of native drag pages in angular, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!