perf(module:select): do not run change detection on events if the `nz…

…-option-item` is disabled
NG-ZORRO · Dec 21, 2021 · 01551e6 · 01551e6
1 parent ab78821
commit 01551e6
Showing 1 changed file with 33 additions and 19 deletions.
diff --git a/components/select/option-item.component.ts b/components/select/option-item.component.ts
@@ -9,23 +9,28 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  NgZone,
   OnChanges,
+  OnInit,
   Output,
   SimpleChanges,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
 
 @Component({
   selector: 'nz-option-item',
   template: `
     <div class="ant-select-item-option-content">
-      <ng-container *ngIf="!customContent">{{ label }}</ng-container>
-      <ng-container *ngIf="customContent">
+      <ng-template [ngIf]="customContent" [ngIfElse]="noCustomContent">
         <ng-template [ngTemplateOutlet]="template"></ng-template>
-      </ng-container>
+      </ng-template>
+      <ng-template #noCustomContent>{{ label }}</ng-template>
     </div>
     <div *ngIf="showState && selected" class="ant-select-item-option-state" style="user-select: none" unselectable="on">
       <i nz-icon nzType="check" class="ant-select-selected-icon" *ngIf="!icon; else icon"></i>
@@ -38,12 +43,11 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
     '[class.ant-select-item-option-grouped]': 'grouped',
     '[class.ant-select-item-option-selected]': 'selected && !disabled',
     '[class.ant-select-item-option-disabled]': 'disabled',
-    '[class.ant-select-item-option-active]': 'activated && !disabled',
-    '(mouseenter)': 'onHostMouseEnter()',
-    '(click)': 'onHostClick()'
-  }
+    '[class.ant-select-item-option-active]': 'activated && !disabled'
+  },
+  providers: [NzDestroyService]
 })
-export class NzOptionItemComponent implements OnChanges {
+export class NzOptionItemComponent implements OnChanges, OnInit {
   selected = false;
   activated = false;
   @Input() grouped = false;
@@ -60,21 +64,11 @@ export class NzOptionItemComponent implements OnChanges {
   @Output() readonly itemClick = new EventEmitter<NzSafeAny>();
   @Output() readonly itemHover = new EventEmitter<NzSafeAny>();
 
-  constructor(private elementRef: ElementRef) {
+  constructor(private elementRef: ElementRef, private ngZone: NgZone, private destroy$: NzDestroyService) {
     // TODO: move to host after View Engine deprecation
     this.elementRef.nativeElement.classList.add('ant-select-item', 'ant-select-item-option');
   }
 
-  onHostMouseEnter(): void {
-    if (!this.disabled) {
-      this.itemHover.next(this.value);
-    }
-  }
-  onHostClick(): void {
-    if (!this.disabled) {
-      this.itemClick.next(this.value);
-    }
-  }
   ngOnChanges(changes: SimpleChanges): void {
     const { value, activatedValue, listOfSelectedValue } = changes;
     if (value || listOfSelectedValue) {
@@ -84,4 +78,24 @@ export class NzOptionItemComponent implements OnChanges {
       this.activated = this.compareWith(this.activatedValue, this.value);
     }
   }
+
+  ngOnInit(): void {
+    this.ngZone.runOutsideAngular(() => {
+      fromEvent(this.elementRef.nativeElement, 'click')
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          if (!this.disabled) {
+            this.ngZone.run(() => this.itemClick.emit(this.value));
+          }
+        });
+
+      fromEvent(this.elementRef.nativeElement, 'mouseenter')
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          if (!this.disabled) {
+            this.ngZone.run(() => this.itemHover.emit(this.value));
+          }
+        });
+    });
+  }
 }