From 052e8eeadfe02472d7ca55333e321062a8e80120 Mon Sep 17 00:00:00 2001 From: wendellhu Date: Wed, 5 Jan 2022 17:07:51 +0800 Subject: [PATCH 1/2] fix(module:icon): fix old icon element not removed close #7186 --- components/icon/icon.directive.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/components/icon/icon.directive.ts b/components/icon/icon.directive.ts index 5d88ccb658..99482ea813 100644 --- a/components/icon/icon.directive.ts +++ b/components/icon/icon.directive.ts @@ -5,6 +5,7 @@ import { AfterContentChecked, + ChangeDetectorRef, Directive, ElementRef, Input, @@ -74,7 +75,8 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, private destroy$ = new Subject(); constructor( - private ngZone: NgZone, + private readonly ngZone: NgZone, + private readonly changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, public iconService: NzIconService, public renderer: Renderer2, @@ -138,6 +140,11 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, from(this._changeIcon()) .pipe(takeUntil(this.destroy$)) .subscribe(svgOrRemove => { + // The _changeIcon method would call Renderer to removed node, 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); From 66b3a6bb0b103001183d4d93f9213643eaa2629c Mon Sep 17 00:00:00 2001 From: wendellhu Date: Wed, 5 Jan 2022 17:10:11 +0800 Subject: [PATCH 2/2] fix: fix typo --- components/icon/icon.directive.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/icon/icon.directive.ts b/components/icon/icon.directive.ts index 99482ea813..ef062da5ee 100644 --- a/components/icon/icon.directive.ts +++ b/components/icon/icon.directive.ts @@ -140,7 +140,8 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, from(this._changeIcon()) .pipe(takeUntil(this.destroy$)) .subscribe(svgOrRemove => { - // The _changeIcon method would call Renderer to removed node, which would call `markElementAsRemoved` eventually, + // 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();