perf(module:steps): do not run change detection if there are no nzIndexChange listeners (#7183)

Author: arturovt

components/steps/step.component.ts

@@ -7,14 +7,18 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   Input,
-  OnDestroy,
+  NgZone,
+  OnInit,
   TemplateRef,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import { Subject } from 'rxjs';
+import { fromEvent, Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { BooleanInput, NgClassType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { NzProgressFormatter } from 'ng-zorro-antd/progress';
@@ -27,10 +31,10 @@ import { NzProgressFormatter } from 'ng-zorro-antd/progress';
   preserveWhitespaces: false,
   template: `
     <div
+      #itemContainer
       class="ant-steps-item-container"
       [attr.role]="clickable && !nzDisabled ? 'button' : null"
       [tabindex]="clickable && !nzDisabled ? 0 : null"
-      (click)="onClick()"
     >
       <div class="ant-steps-item-tail" *ngIf="last !== true"></div>
       <div class="ant-steps-item-icon">
@@ -94,12 +98,14 @@ import { NzProgressFormatter } from 'ng-zorro-antd/progress';
     '[class.ant-steps-item-disabled]': 'nzDisabled',
     '[class.ant-steps-item-custom]': '!!nzIcon',
     '[class.ant-steps-next-error]': '(outStatus === "error") && (currentIndex === index + 1)'
-  }
+  },
+  providers: [NzDestroyService]
 })
-export class NzStepComponent implements OnDestroy {
+export class NzStepComponent implements OnInit {
   static ngAcceptInputType_nzDisabled: BooleanInput;
 
   @ViewChild('processDotTemplate', { static: false }) processDotTemplate?: TemplateRef<void>;
+  @ViewChild('itemContainer', { static: true }) itemContainer!: ElementRef<HTMLElement>;
 
   @Input() nzTitle?: string | TemplateRef<void>;
   @Input() nzSubtitle?: string | TemplateRef<void>;
@@ -143,7 +149,8 @@ export class NzStepComponent implements OnDestroy {
   outStatus = 'process';
   showProcessDot = false;
   clickable = false;
-  click$ = new Subject<number>();
+
+  clickOutsideAngular$ = new Subject<number>();
 
   readonly nullProcessFormat: NzProgressFormatter = () => null;
 
@@ -170,12 +177,19 @@ export class NzStepComponent implements OnDestroy {
 
   private _currentIndex = 0;
 
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  onClick(): void {
-    if (this.clickable && this.currentIndex !== this.index && !this.nzDisabled) {
-      this.click$.next(this.index);
-    }
+  constructor(private cdr: ChangeDetectorRef, private ngZone: NgZone, private destroy$: NzDestroyService) {}
+
+  ngOnInit(): void {
+    this.ngZone.runOutsideAngular(() =>
+      fromEvent(this.itemContainer.nativeElement, 'click')
+        .pipe(
+          filter(() => this.clickable && this.currentIndex !== this.index && !this.nzDisabled),
+          takeUntil(this.destroy$)
+        )
+        .subscribe(() => {
+          this.clickOutsideAngular$.next(this.index);
+        })
+    );
   }
 
   enable(): void {
@@ -191,8 +205,4 @@ export class NzStepComponent implements OnDestroy {
   markForCheck(): void {
     this.cdr.markForCheck();
   }
-
-  ngOnDestroy(): void {
-    this.click$.complete();
-  }
 }

components/steps/steps.component.ts

@@ -13,8 +13,8 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  NgZone,
   OnChanges,
-  OnDestroy,
   OnInit,
   Optional,
   Output,
@@ -24,9 +24,10 @@ import {
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
-import { merge, Subject, Subscription } from 'rxjs';
+import { merge, Subscription } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
 
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { BooleanInput, NgClassType, NzSizeDSType } from 'ng-zorro-antd/core/types';
 import { toBoolean } from 'ng-zorro-antd/core/util';
 
@@ -35,6 +36,7 @@ import { NzStepComponent } from './step.component';
 export type NzDirectionType = 'horizontal' | 'vertical';
 export type NzStatusType = 'wait' | 'process' | 'finish' | 'error';
 export type nzProgressDotTemplate = TemplateRef<{ $implicit: TemplateRef<void>; status: string; index: number }>;
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -45,9 +47,10 @@ export type nzProgressDotTemplate = TemplateRef<{ $implicit: TemplateRef<void>;
     <div class="ant-steps" [ngClass]="classMap">
       <ng-content></ng-content>
     </div>
-  `
+  `,
+  providers: [NzDestroyService]
 })
-export class NzStepsComponent implements OnChanges, OnInit, OnDestroy, AfterContentInit {
+export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
   static ngAcceptInputType_nzProgressDot: BooleanInput | nzProgressDotTemplate | undefined | null;
 
   @ContentChildren(NzStepComponent) steps!: QueryList<NzStepComponent>;
@@ -73,19 +76,20 @@ export class NzStepsComponent implements OnChanges, OnInit, OnDestroy, AfterCont
 
   @Output() readonly nzIndexChange = new EventEmitter<number>();
 
-  private destroy$ = new Subject<void>();
-  private indexChangeSubscription?: Subscription;
+  private indexChangeSubscription = Subscription.EMPTY;
 
   showProcessDot = false;
   customProcessDotTemplate?: TemplateRef<{ $implicit: TemplateRef<void>; status: string; index: number }>;
   classMap: NgClassType = {};
   dir: Direction = 'ltr';
 
   constructor(
+    private ngZone: NgZone,
     private elementRef: ElementRef,
     private renderer: Renderer2,
     private cdr: ChangeDetectorRef,
-    @Optional() private directionality: Directionality
+    @Optional() private directionality: Directionality,
+    private destroy$: NzDestroyService
   ) {
     this.setClassMap();
   }
@@ -111,14 +115,6 @@ export class NzStepsComponent implements OnChanges, OnInit, OnDestroy, AfterCont
     this.updateChildrenSteps();
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-    if (this.indexChangeSubscription) {
-      this.indexChangeSubscription.unsubscribe();
-    }
-  }
-
   ngAfterContentInit(): void {
     if (this.steps) {
       this.steps.changes.pipe(startWith(null), takeUntil(this.destroy$)).subscribe(() => {
@@ -159,12 +155,14 @@ export class NzStepsComponent implements OnChanges, OnInit, OnDestroy, AfterCont
           step.markForCheck();
         });
       });
-      if (this.indexChangeSubscription) {
-        this.indexChangeSubscription.unsubscribe();
-      }
-      this.indexChangeSubscription = merge(...this.steps.map(step => step.click$)).subscribe(index =>
-        this.nzIndexChange.emit(index)
-      );
+      this.indexChangeSubscription.unsubscribe();
+      this.indexChangeSubscription = merge(...this.steps.map(step => step.clickOutsideAngular$))
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(index => {
+          if (this.nzIndexChange.observers.length) {
+            this.ngZone.run(() => this.nzIndexChange.emit(index));
+          }
+        });
     }
   }