perf(module:tree-view): do not run change detection on click events if the nz-tree-node-option is disabled or there are no nzClick listeners (#7178)

Author: arturovt

components/tree-view/option.ts

@@ -6,13 +6,19 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
+  NgZone,
   OnChanges,
+  OnInit,
   Output,
   SimpleChanges
 } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
@@ -25,30 +31,29 @@ import { NzTreeNodeComponent } from './node';
   host: {
     class: 'ant-tree-node-content-wrapper',
     '[class.ant-tree-node-content-wrapper-open]': 'isExpanded',
-    '[class.ant-tree-node-selected]': 'nzSelected',
-    '(click)': 'onClick($event)'
-  }
+    '[class.ant-tree-node-selected]': 'nzSelected'
+  },
+  providers: [NzDestroyService]
 })
-export class NzTreeNodeOptionComponent<T> implements OnChanges {
+export class NzTreeNodeOptionComponent<T> implements OnChanges, OnInit {
   static ngAcceptInputType_nzSelected: BooleanInput;
   static ngAcceptInputType_nzDisabled: BooleanInput;
 
   @Input() @InputBoolean() nzSelected = false;
   @Input() @InputBoolean() nzDisabled = false;
   @Output() readonly nzClick = new EventEmitter<MouseEvent>();
 
-  constructor(private treeNode: NzTreeNodeComponent<T>) {}
+  constructor(
+    private ngZone: NgZone,
+    private host: ElementRef<HTMLElement>,
+    private destroy$: NzDestroyService,
+    private treeNode: NzTreeNodeComponent<T>
+  ) {}
 
   get isExpanded(): boolean {
     return this.treeNode.isExpanded;
   }
 
-  onClick(e: MouseEvent): void {
-    if (!this.nzDisabled) {
-      this.nzClick.emit(e);
-    }
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     const { nzDisabled, nzSelected } = changes;
     if (nzDisabled) {
@@ -67,4 +72,17 @@ export class NzTreeNodeOptionComponent<T> implements OnChanges {
       }
     }
   }
+
+  ngOnInit(): void {
+    this.ngZone.runOutsideAngular(() =>
+      fromEvent<MouseEvent>(this.host.nativeElement, 'click')
+        .pipe(
+          filter(() => !this.nzDisabled && this.nzClick.observers.length > 0),
+          takeUntil(this.destroy$)
+        )
+        .subscribe(event => {
+          this.ngZone.run(() => this.nzClick.emit(event));
+        })
+    );
+  }
 }