perf(module:collapse): do not run change detection if the panel is disabled (#7181)

Author: arturovt

components/collapse/collapse-panel.component.ts

@@ -7,22 +7,26 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   EventEmitter,
   Host,
   Input,
+  NgZone,
   OnDestroy,
   OnInit,
   Optional,
   Output,
   TemplateRef,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { fromEvent } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 
 import { collapseMotion } from 'ng-zorro-antd/core/animation';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
@@ -37,7 +41,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel';
   encapsulation: ViewEncapsulation.None,
   animations: [collapseMotion],
   template: `
-    <div role="button" [attr.aria-expanded]="nzActive" class="ant-collapse-header" (click)="clickHeader()">
+    <div #collapseHeader role="button" [attr.aria-expanded]="nzActive" class="ant-collapse-header">
       <div *ngIf="nzShowArrow">
         <ng-container *nzStringTemplateOutlet="nzExpandedIcon; let expandedIcon">
           <i nz-icon [nzType]="expandedIcon || 'right'" class="ant-collapse-arrow" [nzRotate]="nzActive ? 90 : 0"></i>
@@ -65,7 +69,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel';
     '[class.ant-collapse-no-arrow]': '!nzShowArrow',
     '[class.ant-collapse-item-active]': 'nzActive',
     '[class.ant-collapse-item-disabled]': 'nzDisabled'
-  }
+  },
+  providers: [NzDestroyService]
 })
 export class NzCollapsePanelComponent implements OnInit, OnDestroy {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
@@ -80,20 +85,18 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
   @Input() nzHeader?: string | TemplateRef<void>;
   @Input() nzExpandedIcon?: string | TemplateRef<void>;
   @Output() readonly nzActiveChange = new EventEmitter<boolean>();
-  private destroy$ = new Subject();
-  clickHeader(): void {
-    if (!this.nzDisabled) {
-      this.nzCollapseComponent.click(this);
-    }
-  }
+
+  @ViewChild('collapseHeader', { static: true }) collapseHeader!: ElementRef<HTMLElement>;
 
   markForCheck(): void {
     this.cdr.markForCheck();
   }
 
   constructor(
     public nzConfigService: NzConfigService,
+    private ngZone: NgZone,
     private cdr: ChangeDetectorRef,
+    private destroy$: NzDestroyService,
     @Host() private nzCollapseComponent: NzCollapseComponent,
     @Optional() public noAnimation?: NzNoAnimationDirective
   ) {
@@ -107,11 +110,20 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.nzCollapseComponent.addPanel(this);
+
+    this.ngZone.runOutsideAngular(() =>
+      fromEvent(this.collapseHeader.nativeElement, 'click')
+        .pipe(
+          filter(() => !this.nzDisabled),
+          takeUntil(this.destroy$)
+        )
+        .subscribe(() => {
+          this.ngZone.run(() => this.nzCollapseComponent.click(this));
+        })
+    );
   }
 
   ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
     this.nzCollapseComponent.removePanel(this);
   }
 }

components/collapse/collapse.component.ts

@@ -9,15 +9,14 @@ import {
   ChangeDetectorRef,
   Component,
   Input,
-  OnDestroy,
   OnInit,
   Optional,
   ViewEncapsulation
 } from '@angular/core';
-import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
@@ -38,9 +37,10 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapse';
     '[class.ant-collapse-ghost]': `nzGhost`,
     '[class.ant-collapse-borderless]': '!nzBordered',
     '[class.ant-collapse-rtl]': "dir === 'rtl'"
-  }
+  },
+  providers: [NzDestroyService]
 })
-export class NzCollapseComponent implements OnDestroy, OnInit {
+export class NzCollapseComponent implements OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   static ngAcceptInputType_nzAccordion: BooleanInput;
   static ngAcceptInputType_nzBordered: BooleanInput;
@@ -54,11 +54,12 @@ export class NzCollapseComponent implements OnDestroy, OnInit {
   dir: Direction = 'ltr';
 
   private listOfNzCollapsePanelComponent: NzCollapsePanelComponent[] = [];
-  private destroy$ = new Subject();
+
   constructor(
     public nzConfigService: NzConfigService,
     private cdr: ChangeDetectorRef,
-    @Optional() private directionality: Directionality
+    @Optional() private directionality: Directionality,
+    private destroy$: NzDestroyService
   ) {
     this.nzConfigService
       .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
@@ -100,8 +101,4 @@ export class NzCollapseComponent implements OnDestroy, OnInit {
     collapse.nzActive = !collapse.nzActive;
     collapse.nzActiveChange.emit(collapse.nzActive);
   }
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }