perf(module:tree): do not run change detection when the tree node is clicked

components/tree/tree-node.component.ts

@@ -108,8 +108,7 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
     '[class.ant-tree-treenode-checkbox-indeterminate]': `!nzSelectMode && isHalfChecked`,
     '[class.ant-tree-treenode-selected]': `!nzSelectMode && isSelected`,
     '[class.ant-tree-treenode-loading]': `!nzSelectMode && isLoading`,
-    '[style.display]': 'displayStyle',
-    '(mousedown)': 'onMousedown($event)'
+    '[style.display]': 'displayStyle'
   }
 })
 export class NzTreeNodeBuiltinComponent implements OnInit, OnChanges, OnDestroy {
@@ -195,12 +194,6 @@ export class NzTreeNodeBuiltinComponent implements OnInit, OnChanges, OnDestroy
     return !this.isExpanded && !this.isLeaf;
   }
 
-  onMousedown(event: MouseEvent): void {
-    if (this.nzSelectMode) {
-      event.preventDefault();
-    }
-  }
-
   /**
    * collapse node
    *
@@ -404,13 +397,23 @@ export class NzTreeNodeBuiltinComponent implements OnInit, OnChanges, OnDestroy
     public nzTreeService: NzTreeBaseService,
     private ngZone: NgZone,
     private renderer: Renderer2,
-    private elementRef: ElementRef,
+    private elementRef: ElementRef<HTMLElement>,
     private cdr: ChangeDetectorRef,
     @Host() @Optional() public noAnimation?: NzNoAnimationDirective
   ) {}
 
   ngOnInit(): void {
     this.nzTreeNode.component = this;
+
+    this.ngZone.runOutsideAngular(() => {
+      fromEvent(this.elementRef.nativeElement, 'mousedown')
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(event => {
+          if (this.nzSelectMode) {
+            event.preventDefault();
+          }
+        });
+    });
   }
 
   ngOnChanges(changes: { [propertyName: string]: SimpleChange }): void {

components/tree/tree.spec.ts

@@ -1,5 +1,5 @@
-import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { fakeAsync, tick } from '@angular/core/testing';
+import { ApplicationRef, Component, TemplateRef, ViewChild } from '@angular/core';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Observable, of } from 'rxjs';
@@ -181,6 +181,26 @@ describe('tree', () => {
         const hiddenNodes = nativeElement.querySelectorAll('nz-tree-node[builtin][style*="display: none;"]');
         expect(hiddenNodes.length).toEqual(2);
       }));
+
+      describe('change detection behavior', () => {
+        it('should not run change detection when the `nz-tree-node` is clicked', () => {
+          const { component, fixture, nativeElement } = testBed;
+          component.selectMode = true;
+          fixture.detectChanges();
+
+          const appRef = TestBed.inject(ApplicationRef);
+          const event = new MouseEvent('mousedown');
+
+          spyOn(appRef, 'tick');
+          spyOn(event, 'preventDefault').and.callThrough();
+
+          const treeNode = nativeElement.querySelector('nz-tree-node')!;
+          treeNode.dispatchEvent(event);
+
+          expect(appRef.tick).not.toHaveBeenCalled();
+          expect(event.preventDefault).toHaveBeenCalled();
+        });
+      });
     });
 
     describe('basic style of tree', () => {
@@ -577,6 +597,7 @@ describe('tree', () => {
       [nzExpandAll]="expandAll"
       [nzExpandedIcon]="expandedIcon"
       [nzAsyncData]="asyncData"
+      [nzSelectMode]="selectMode"
       (nzSearchValueChange)="nzEvent($event)"
       (nzClick)="nzEvent($event)"
       (nzDblClick)="nzEvent($event)"
@@ -595,6 +616,7 @@ export class NzTestTreeBasicControlledComponent {
   multiple = true;
   expandAll = false;
   asyncData = false;
+  selectMode = false;
   checkStrictly = false;
   showLine = false;
   defaultCheckedKeys: string[] = [];