We had an custom input component which would cause a performance issue the more times we added this field type to a page because of a ) While this works, we need to be very careful about not adding memory leaks, but more importantly we're not using at all which keeps code nice and clean.Ĭould a feature be added to enable/disable host listeners from listening to the actual native events? This isn't about not firing off events under a certain criteria, but completely removing native event listeners when they're not needed.ĭiscussed this with both and and said this would also be related to work needed for #1773 The current work around is for us to manually add and remove touchmove or scroll listeners depending on our criteria. When they're not enabled at all, there's no need to still be listening in on every touchmove/scroll events. The other is for our pull-to-refresh and infinite scroll features, where users may or may not have them enabled. One example is when an input has focus, we want to know when the user begins to scroll it's parent, however, we don't need every input to listen to every scroll event. Additionally, there are many times we don't even need to listen in on touchmove events at all, unless a certain criteria happens. Far too many and often unnecessary change detections are happening. But I'm not sure that's the best way either.There are cases where is the ideal API to use, however, for events like touchmove, mousemove or scroll we cannot use them for performance reasons. On mousedown, I could then check for the event.target accordingly. But that feels messy.Īlternatively, I could apply my directive to the via setting the selector. I suppose I could create a JS function that grabs the parent, checks for a matching class name of 'draggableContainer' and if so, done, if not, grabs the parent of that element, checks again, and so on until it finds the parent that matches. This allows me to set a mousedown HostListener to determine when a user has clicked on that object.īut.I don't see a clean 'angular way' to now change the css of the div two parents up. I initially set up a directive using as the selector.
The goal here is to make ContainerBox movable on screen when a user clicks and drags on the child element DragHandle (note, the HTML for ContainerBox is in one component template, the HTML for DragHandle is in a different component template) The premise is that I have this type of structure:
I still have some plain-js/jquery thinking in my head and struggling to get the 'angular way' to handle this.
0 kommentar(er)
