Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(module:icon): re-enter Angular zone after icons have been loaded #7719

Merged
merged 1 commit into from Nov 15, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 21 additions & 12 deletions components/icon/icon.directive.ts
Expand Up @@ -136,23 +136,32 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
private changeIcon2(): void {
this.setClassName();

// We don't need to re-enter the Angular zone for adding classes or attributes through the renderer.
// The Angular zone is left deliberately before the SVG is set
// since `_changeIcon` spawns asynchronous tasks as promise and
// HTTP calls. This is used to reduce the number of change detections
// while the icon is being loaded dynamically.
this.ngZone.runOutsideAngular(() => {
from(this._changeIcon())
.pipe(takeUntil(this.destroy$))
.subscribe({
next: svgOrRemove => {
// The _changeIcon method would call Renderer to remove the element of the old icon,
// which would call `markElementAsRemoved` eventually,
// so we should call `detectChanges` to tell Angular remove the DOM node.
// #7186
this.changeDetectorRef.detectChanges();

if (svgOrRemove) {
this.setSVGData(svgOrRemove);
this.handleSpin(svgOrRemove);
this.handleRotate(svgOrRemove);
}
// Get back into the Angular zone after completing all the tasks.
// Since we manually run change detection locally, we have to re-enter
// the zone because the change detection might also be run on other local
// components, leading them to handle template functions outside of the Angular zone.
this.ngZone.run(() => {
// The _changeIcon method would call Renderer to remove the element of the old icon,
// which would call `markElementAsRemoved` eventually,
// so we should call `detectChanges` to tell Angular remove the DOM node.
// #7186
this.changeDetectorRef.detectChanges();

if (svgOrRemove) {
this.setSVGData(svgOrRemove);
this.handleSpin(svgOrRemove);
this.handleRotate(svgOrRemove);
}
});
},
error: warn
});
Expand Down