perf(module:image): do not run change detection if there are no containerClick listeners (#7147)

Author: arturovt

components/image/image-preview.component.ts

@@ -11,14 +11,17 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  OnDestroy,
+  NgZone,
+  OnInit,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import { Subject } from 'rxjs';
+import { fromEvent } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { fadeMotion } from 'ng-zorro-antd/core/animation';
 import { NzConfigService } from 'ng-zorro-antd/core/config';
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { isNotNil } from 'ng-zorro-antd/core/util';
 
@@ -113,12 +116,12 @@ const initialPosition = {
     '[@fadeMotion]': 'animationState',
     '(@fadeMotion.start)': 'onAnimationStart($event)',
     '(@fadeMotion.done)': 'onAnimationDone($event)',
-    '(click)': 'onContainerClick($event)',
     tabindex: '-1',
     role: 'document'
-  }
+  },
+  providers: [NzDestroyService]
 })
-export class NzImagePreviewComponent implements OnDestroy {
+export class NzImagePreviewComponent implements OnInit {
   images: NzImage[] = [];
   index = 0;
   isDragging = false;
@@ -176,7 +179,6 @@ export class NzImagePreviewComponent implements OnDestroy {
 
   private zoom: number;
   private rotate: number;
-  private destroy$ = new Subject();
 
   get animationDisabled(): boolean {
     return this.config.nzNoAnimation ?? false;
@@ -188,10 +190,13 @@ export class NzImagePreviewComponent implements OnDestroy {
   }
 
   constructor(
+    private ngZone: NgZone,
+    private host: ElementRef<HTMLElement>,
     private cdr: ChangeDetectorRef,
     public nzConfigService: NzConfigService,
     public config: NzImagePreviewOptions,
-    private overlayRef: OverlayRef
+    private overlayRef: OverlayRef,
+    private destroy$: NzDestroyService
   ) {
     this.zoom = this.config.nzZoom ?? 1;
     this.rotate = this.config.nzRotate ?? 0;
@@ -200,6 +205,18 @@ export class NzImagePreviewComponent implements OnDestroy {
     this.updatePreviewImageWrapperTransform();
   }
 
+  ngOnInit(): void {
+    this.ngZone.runOutsideAngular(() => {
+      fromEvent(this.host.nativeElement, 'click')
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(event => {
+          if (event.target === event.currentTarget && this.maskClosable && this.containerClick.observers.length) {
+            this.ngZone.run(() => this.containerClick.emit());
+          }
+        });
+    });
+  }
+
   setImages(images: NzImage[]): void {
     this.images = images;
     this.cdr.markForCheck();
@@ -278,12 +295,6 @@ export class NzImagePreviewComponent implements OnDestroy {
     this.next();
   }
 
-  onContainerClick(e: MouseEvent): void {
-    if (e.target === e.currentTarget && this.maskClosable) {
-      this.containerClick.emit();
-    }
-  }
-
   onAnimationStart(event: AnimationEvent): void {
     if (event.toState === 'enter') {
       this.setEnterAnimationClass();
@@ -333,11 +344,6 @@ export class NzImagePreviewComponent implements OnDestroy {
     }
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   private updatePreviewImageTransform(): void {
     this.previewImageTransform = `scale3d(${this.zoom}, ${this.zoom}, 1) rotate(${this.rotate}deg)`;
   }