Black the zonejs “listening” event list in polyfil

问题:

I've been trying to figure out how to stop mousemove event firing change detection in Angular. Some articles mentioned I can achieve this by adding a line in polyfills.ts:
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove'];

I've tried it in stackblitz and it perfectly works. BUT, the tricky part is that it doesn't not work at all if I create a Angular project in my local and do totally the same thing. It just keeps triggering change detection on mousemove event even though I add the line above in polyfills.ts.

What am I missing? Any insight would be appreciated!

回答1:

Thanks to @jialipassion, managed to nail it.

1. Create a new file, zone-flag.ts at the same level with polyfills.ts
2. Add (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove']; in zone-flag.ts:

// in zone-flag.ts
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove'];

3. Add import './zone-flag' in polyfills.ts:

// in polyfills.ts
import './zone-flag';
import 'zone.js/dist/zone'; // Included with Angular CLI.

Hope this help anyone who might navigate here.