-
-
Save robwormald/cb12881da7cbc73cf65dd042fad7b0fb to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const BLACKLISTED_ZONE_EVENTS: string[] = [ | |
'addEventListener:mouseenter', | |
'addEventListener:mouseleave', | |
'addEventListener:mousemove', | |
'addEventListener:mouseout', | |
'addEventListener:mouseover', | |
'addEventListener:mousewheel', | |
'addEventListener:scroll', | |
'requestAnimationFrame', | |
]; | |
export const blacklistZone = Zone.current.fork({ | |
name: 'blacklist', | |
onScheduleTask: (delegate: ZoneDelegate, current: Zone, target: Zone, | |
task: Task): Task => { | |
// Blacklist scroll, mouse, and request animation frame events. | |
if (task.type === 'eventTask' && | |
BLACKLISTED_ZONE_EVENTS.some( | |
(name) => task.source.indexOf(name) > -1)) { | |
task.cancelScheduleRequest(); | |
// Schedule task in root zone, note Zone.root != target, | |
// "target" Zone is Angular. Scheduling a task within Zone.root will | |
// prevent the infinite digest cycle from appearing. | |
return Zone.root.scheduleTask(task); | |
} else { | |
return delegate.scheduleTask(target, task); | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {blacklistZone} from './blacklist' | |
blacklistZone.run(() => { | |
platformBrowser().bootstrapModuleFactory(...) | |
}) |
Note that it breaks matTooltip support. If you need tooltips, keep the enter over and leave inside zone
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I haven't yet realised the full extent of consequences from doing this, but so far it's been a life-saver for d3 applications in angular with hundreds of listeners on hundreds of small dots and charts.