perf(module:carousel): do not run change detection when the timer fir…

…es (#7136)
NG-ZORRO · Feb 25, 2022 · fc991d1 · fc991d1
1 parent 7acb8db
commit fc991d1
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/components/carousel/carousel.component.ts b/components/carousel/carousel.component.ts
@@ -172,7 +172,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
   constructor(
     elementRef: ElementRef,
     public readonly nzConfigService: NzConfigService,
-    private readonly ngZone: NgZone,
+    public readonly ngZone: NgZone,
     private readonly renderer: Renderer2,
     private readonly cdr: ChangeDetectorRef,
     private readonly platform: Platform,

diff --git a/components/carousel/strategies/experimental/flip-strategy.ts b/components/carousel/strategies/experimental/flip-strategy.ts
@@ -28,8 +28,11 @@ export class NzCarouselFlipStrategy extends NzCarouselBaseStrategy {
         this.renderer.setStyle(content.el, 'backface-visibility', 'hidden');
       });
 
-      timer(this.carouselComponent!.nzTransitionSpeed).subscribe(() => {
-        this.contents.forEach(c => this.renderer.setStyle(c.el, 'transition', ['transform 500ms ease 0s']));
+      const { carouselComponent } = this;
+      carouselComponent!.ngZone.runOutsideAngular(() => {
+        timer(carouselComponent!.nzTransitionSpeed).subscribe(() => {
+          this.contents.forEach(c => this.renderer.setStyle(c.el, 'transition', ['transform 500ms ease 0s']));
+        });
       });
     }
   }

diff --git a/components/carousel/typings.ts b/components/carousel/typings.ts
@@ -4,7 +4,7 @@
  */
 
 import { Direction } from '@angular/cdk/bidi';
-import { InjectionToken, QueryList } from '@angular/core';
+import { InjectionToken, NgZone, QueryList } from '@angular/core';
 
 import { NzCarouselContentDirective } from './carousel-content.directive';
 import { NzCarouselBaseStrategy } from './strategies/base-strategy';
@@ -21,6 +21,7 @@ export interface NzCarouselComponentAsSource {
   slickTrackEl: HTMLElement;
   activeIndex: number;
   dir: Direction;
+  ngZone: NgZone;
 }
 
 export interface NzCarouselStrategyRegistryItem {