perf(module:icon): do not run change detection when changing icon (#7071

) * perf(module:icon): do not run change detection when changing icon * fix: do not run `markForCheck()` for the view event handler
NG-ZORRO · Dec 16, 2021 · e998e4a · e998e4a
1 parent baf7f0a
commit e998e4a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/components/icon/icon.directive.ts b/components/icon/icon.directive.ts
@@ -8,12 +8,16 @@ import {
   Directive,
   ElementRef,
   Input,
+  NgZone,
   OnChanges,
+  OnDestroy,
   OnInit,
   Optional,
   Renderer2,
   SimpleChanges
 } from '@angular/core';
+import { from, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { IconDirective, ThemeType } from '@ant-design/icons-angular';
 
@@ -29,7 +33,7 @@ import { NzIconPatchService, NzIconService } from './icon.service';
     '[class.anticon]': 'true'
   }
 })
-export class NzIconDirective extends IconDirective implements OnInit, OnChanges, AfterContentChecked {
+export class NzIconDirective extends IconDirective implements OnInit, OnChanges, AfterContentChecked, OnDestroy {
   static ngAcceptInputType_nzSpin: BooleanInput;
 
   cacheClassName: string | null = null;
@@ -67,7 +71,10 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
   private iconfont?: string;
   private spin: boolean = false;
 
+  private destroy$ = new Subject<void>();
+
   constructor(
+    private ngZone: NgZone,
     elementRef: ElementRef,
     public iconService: NzIconService,
     public renderer: Renderer2,
@@ -116,17 +123,27 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
     }
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next();
+  }
+
   /**
    * Replacement of `changeIcon` for more modifications.
    */
   private changeIcon2(): void {
     this.setClassName();
-    this._changeIcon().then(svgOrRemove => {
-      if (svgOrRemove) {
-        this.setSVGData(svgOrRemove);
-        this.handleSpin(svgOrRemove);
-        this.handleRotate(svgOrRemove);
-      }
+
+    // We don't need to re-enter the Angular zone for adding classes or attributes through the renderer.
+    this.ngZone.runOutsideAngular(() => {
+      from(this._changeIcon())
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(svgOrRemove => {
+          if (svgOrRemove) {
+            this.setSVGData(svgOrRemove);
+            this.handleSpin(svgOrRemove);
+            this.handleRotate(svgOrRemove);
+          }
+        });
     });
   }
 

diff --git a/components/menu/submenu.component.ts b/components/menu/submenu.component.ts
@@ -194,7 +194,6 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterContentInit,
     } else if (placement === 'leftTop' || placement === 'leftBottom' || placement === 'left') {
       this.position = 'left';
     }
-    this.cdr.markForCheck();
   }
 
   constructor(