mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
22f9e454a4
fix https://github.com/angular/components/issues/21674 When setting `ngZoneRunCoalescing` to true, `onStable` is not emitted correctly. The reason is before this commit, the code looks like this ``` // Application code call `ngZone.run()` ngZone.run(() => {}); // step 1 // Inside NgZone, in the OnInvoke hook, NgZone try to delay the checkStable() function delayChangeDetectionForEvents(zone: NgZonePrivate) { if (zone.lastRequestAnimationFrameId !== -1) { // step 9 return; } zone.lastRequestAnimationFrameId = zone.nativeRequestAnimationFrame.call(global, () => { // step 2 if (!zone.fakeTopEventTask) { zone.fakeTopEventTask = Zone.root.scheduleEventTask('fakeTopEventTask', () => { zone.lastRequestAnimationFrameId = -1; // step 3 updateMicroTaskStatus(zone); // step 4 checkStable(zone); // step 6 }, undefined, () => {}, () => {}); } zone.fakeTopEventTask.invoke(); }); updateMicroTaskStatus(zone); } function updateMicroTaskStatus(zone: NgZonePrivate, ignoreCheckRAFId = false) { if (zone._hasPendingMicrotasks || ((zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) && zone.lastRequestAnimationFrameId !== -1)) { // step 5 zone.hasPendingMicrotasks = true; } else { zone.hasPendingMicrotasks = false; } } function checkStable(zone: NgZonePrivate) { if (zone._nesting == 0 && !zone.hasPendingMicrotasks && !zone.isStable) { // step 7 try { zone._nesting++; zone.onMicrotaskEmpty.emit(null); ... } // application ref subscribe onMicroTaskEmpty ngZone.onMicroTaskEmpty.subscribe(() => { ngZone.run(() => { // step 8 tick(); }); }); ``` And the process is: 1. step 1: application call ngZone.run() 2. step 2: NgZone delay the checkStable() call in a requestAnimationFrame, and also set zone.lastRequestAnimationFrameId 3. step 3: Inside the requestAnimationFrame callback, reset zone.lastRequestAnimationFrameId first 4. step 4: update microTask status 5, step 5: if zone.lastRequestAnimationFrameId is -1, that means no microTask pending. 6. step 6: checkStable and trigger onMicrotaskEmpty emitter. 7. step 7: ApplicationRef subscribed onMicrotaskEmpty, so it will call another `ngZone.run()` to process tick() 8. step 8: And this new `ngZone.run()` will try to check `zone.lastRequestAnimationFrameId` in `step 9` when trying to delay the checkStable(), and since the zone.lastRequestAnimationFrameId is already reset to -1 in step 3, so this ngZone.run() will run into step 2 again. 9. And become a infinite loop..., so onStable is never emit In this commit, the `zone.lastRequestAnimationFrameId` reset is moved after `checkStable()` call. PR Close #40540 |
||
|---|---|---|
| .. | ||
| acceptance | ||
| animation | ||
| bundling | ||
| change_detection | ||
| debug | ||
| di | ||
| dom | ||
| i18n | ||
| linker | ||
| metadata | ||
| reflection | ||
| render3 | ||
| sanitization | ||
| strict_types | ||
| testability | ||
| util | ||
| view | ||
| zone | ||
| application_init_spec.ts | ||
| application_module_spec.ts | ||
| application_ref_integration_spec.ts | ||
| application_ref_spec.ts | ||
| BUILD.bazel | ||
| component_fixture_spec.ts | ||
| dev_mode_spec.ts | ||
| directive_lifecycle_integration_spec.ts | ||
| error_handler_spec.ts | ||
| event_emitter_spec.ts | ||
| fake_async_spec.ts | ||
| forward_ref_integration_spec.ts | ||
| spies.ts | ||
| test_bed_async_spec.ts | ||
| test_bed_spec.ts | ||
| testing_internal_spec.ts | ||
| util_spec.ts | ||