fix(module:carousel): support SSR (#5671)

close #4292
NG-ZORRO · Sep 14, 2020 · 65b44aa · 65b44aa
1 parent 48875f6
commit 65b44aa
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/components/carousel/carousel.component.ts b/components/carousel/carousel.component.ts
@@ -170,9 +170,6 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
   }
 
   ngAfterViewInit(): void {
-    if (!this.platform.isBrowser) {
-      return;
-    }
     this.slickListEl = this.slickList!.nativeElement;
     this.slickTrackEl = this.slickTrack!.nativeElement;
 
@@ -194,6 +191,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
 
     // If embedded in an entry component, it may do initial render at a inappropriate time.
     // ngZone.onStable won't do this trick
+    // TODO: need to change this.
     Promise.resolve().then(() => {
       this.syncStrategy();
     });
@@ -274,14 +272,14 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
     // Load custom strategies first.
     const customStrategy = this.customStrategies ? this.customStrategies.find(s => s.name === this.nzEffect) : null;
     if (customStrategy) {
-      this.strategy = new (customStrategy.strategy as NzSafeAny)(this, this.cdr, this.renderer);
+      this.strategy = new (customStrategy.strategy as NzSafeAny)(this, this.cdr, this.renderer, this.platform);
       return;
     }
 
     this.strategy =
       this.nzEffect === 'scrollx'
-        ? new NzCarouselTransformStrategy(this, this.cdr, this.renderer)
-        : new NzCarouselOpacityStrategy(this, this.cdr, this.renderer);
+        ? new NzCarouselTransformStrategy(this, this.cdr, this.renderer, this.platform)
+        : new NzCarouselOpacityStrategy(this, this.cdr, this.renderer, this.platform);
   }
 
   private scheduleNextTransition(): void {

diff --git a/components/carousel/strategies/base-strategy.ts b/components/carousel/strategies/base-strategy.ts
@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { Platform } from '@angular/cdk/platform';
 import { ChangeDetectorRef, QueryList, Renderer2 } from '@angular/core';
 import { Observable } from 'rxjs';
 
@@ -31,7 +32,12 @@ export abstract class NzCarouselBaseStrategy {
     return this.contents[this.maxIndex].el;
   }
 
-  constructor(carouselComponent: NzCarouselComponentAsSource, protected cdr: ChangeDetectorRef, protected renderer: Renderer2) {
+  constructor(
+    carouselComponent: NzCarouselComponentAsSource,
+    protected cdr: ChangeDetectorRef,
+    protected renderer: Renderer2,
+    protected platform: Platform
+  ) {
     this.carouselComponent = carouselComponent;
   }
 
@@ -40,15 +46,26 @@ export abstract class NzCarouselBaseStrategy {
    * @param contents
    */
   withCarouselContents(contents: QueryList<NzCarouselContentDirective> | null): void {
-    // TODO: carousel and its contents should be separated.
     const carousel = this.carouselComponent!;
-    const rect = carousel.el.getBoundingClientRect();
     this.slickListEl = carousel.slickListEl;
     this.slickTrackEl = carousel.slickTrackEl;
-    this.unitWidth = rect.width;
-    this.unitHeight = rect.height;
-    this.contents = contents ? contents.toArray() : [];
+    this.contents = contents?.toArray() || [];
     this.length = this.contents.length;
+
+    if (this.platform.isBrowser) {
+      const rect = carousel.el.getBoundingClientRect();
+      this.unitWidth = rect.width;
+      this.unitHeight = rect.height;
+    } else {
+      // Since we cannot call getBoundingClientRect in server, we just hide all items except for the first one.
+      contents?.forEach((content, index) => {
+        if (index === 0) {
+          this.renderer.setStyle(content.el, 'width', '100%');
+        } else {
+          this.renderer.setStyle(content.el, 'display', 'none');
+        }
+      });
+    }
   }
 
   /**

diff --git a/components/carousel/strategies/transform-strategy.ts b/components/carousel/strategies/transform-strategy.ts
@@ -30,7 +30,8 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy {
     const carousel = this.carouselComponent!;
     const activeIndex = carousel.activeIndex;
 
-    if (this.contents.length) {
+    // We only do when we are in browser.
+    if (this.platform.isBrowser && this.contents.length) {
       this.renderer.setStyle(this.slickListEl, 'height', `${this.unitHeight}px`);
 
       if (this.vertical) {