fix(module:carousel): support dynamic change of nz-carousel-content (#60

) closes #56
NG-ZORRO · Aug 18, 2017 · 44865c2 · 44865c2
1 parent 530ae97
commit 44865c2
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 23 deletions.
diff --git a/src/components/carousel/nz-carousel-content.directive.ts b/src/components/carousel/nz-carousel-content.directive.ts
@@ -1,7 +1,9 @@
 import {
   Directive,
-  HostBinding
+  HostBinding,
+  ElementRef
 } from '@angular/core';
+
 @Directive({
   selector: '[nz-carousel-content]',
 })
@@ -10,7 +12,9 @@ export class NzCarouselContentDirective {
   isActive = false;
   left = null;
   top = null;
-  fadeMode = false;
+  fadeMode = false
+  nativeElement: HTMLElement;
+
 
   @HostBinding('class.slick-slide') _nzSlickSlide = true;
 
@@ -48,4 +52,8 @@ export class NzCarouselContentDirective {
     }
   }
 
+  constructor(private _el: ElementRef) {
+    this.nativeElement = this._el.nativeElement;
+  }
+
 }
diff --git a/src/components/carousel/nz-carousel.component.ts b/src/components/carousel/nz-carousel.component.ts
@@ -37,7 +37,14 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   activeIndex = 0;
   transform = 'translate3d(0px, 0px, 0px)';
   interval;
-  @ContentChildren(NzCarouselContentDirective) slideContents;
+  slideContents;
+
+  @ContentChildren(NzCarouselContentDirective)
+  set _slideContents(value) {
+    this.slideContents = value;
+    this.renderContent();
+  }
+
   @ViewChild('slickList') slickList: ElementRef;
   @ViewChild('slickTrack') slickTrack: ElementRef;
   @Input() nzAutoPlay = false;
@@ -67,8 +74,14 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit() {
+    this.renderContent();
+  }
+
+  renderContent() {
     setTimeout(_ => {
-      this.slideContents.first.isActive = true;
+      if (this.slideContents.first) {
+        this.slideContents.first.isActive = true;
+      }
       this.slideContents.forEach((content, i) => {
         content.width = this.hostElement.nativeElement.offsetWidth;
         if (this.nzEffect === 'fade') {
@@ -83,14 +96,21 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
       if (this.nzAutoPlay) {
         this.createInterval();
       }
-      this._renderer.setStyle(this.slickList.nativeElement, 'height', `${this.hostElement.nativeElement.offsetHeight}px`);
+
       if (this.nzVertical) {
+        this._renderer.removeStyle(this.slickList.nativeElement, 'height');
+        if (this.slideContents.first) {
+          this._renderer.setStyle(this.slickList.nativeElement, 'height', `${this.slideContents.first.nativeElement.offsetHeight}px`);
+        }
+        this._renderer.removeStyle(this.slickTrack.nativeElement, 'height');
         this._renderer.setStyle(this.slickTrack.nativeElement, 'height', `${this.slideContents.length * this.hostElement.nativeElement.offsetHeight}px`);
       } else {
+        this._renderer.removeStyle(this.slickList.nativeElement, 'height');
+        this._renderer.setStyle(this.slickList.nativeElement, 'height', `${this.hostElement.nativeElement.offsetHeight}px`);
+        this._renderer.removeStyle(this.slickTrack.nativeElement, 'width');
         this._renderer.setStyle(this.slickTrack.nativeElement, 'width', `${this.slideContents.length * this.hostElement.nativeElement.offsetWidth}px`);
       }
     })
-
   }
 
   createInterval() {

diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-auto.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-auto.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+
 @Component({
   selector: 'nz-demo-carousel-auto',
   template: `
     <nz-carousel [nzAutoPlay]="true">
-      <div nz-carousel-content><h3>1</h3></div>
-      <div nz-carousel-content><h3>2</h3></div>
-      <div nz-carousel-content><h3>3</h3></div>
-      <div nz-carousel-content><h3>4</h3></div>
+      <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
       `:host ::ng-deep .ant-carousel .slick-slide {
@@ -17,17 +15,22 @@ import { Component, OnInit } from '@angular/core';
       color: #fff;
       overflow: hidden;
     }
+
     h3 {
       color: #fff;
     }
     `
   ]
 })
 export class NzDemoCarouselAutoComponent implements OnInit {
+  array = [ 1 ];
 
   constructor() {
   }
 
   ngOnInit() {
+    setTimeout(_ => {
+      this.array = [ 1, 2, 3, 4 ];
+    }, 500)
   }
 }
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-basic.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-basic.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+
 @Component({
   selector: 'nz-demo-carousel-basic',
   template: `
     <nz-carousel>
-      <div nz-carousel-content><h3>1</h3></div>
-      <div nz-carousel-content><h3>2</h3></div>
-      <div nz-carousel-content><h3>3</h3></div>
-      <div nz-carousel-content><h3>4</h3></div>
+      <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
       `:host ::ng-deep .ant-carousel .slick-slide {
@@ -17,17 +15,22 @@ import { Component, OnInit } from '@angular/core';
       color: #fff;
       overflow: hidden;
     }
+
     h3 {
       color: #fff;
     }
     `
   ]
 })
 export class NzDemoCarouselBasicComponent implements OnInit {
+  array = [ 1, 2, 3 ];
 
   constructor() {
   }
 
   ngOnInit() {
+    setTimeout(_ => {
+      this.array = [ 1, 2, 3, 4 ];
+    }, 500)
   }
 }
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-fade.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-fade.component.ts
@@ -3,10 +3,7 @@ import { Component, OnInit } from '@angular/core';
   selector: 'nz-demo-carousel-fade',
   template: `
     <nz-carousel [nzEffect]="'fade'">
-      <div nz-carousel-content><h3>1</h3></div>
-      <div nz-carousel-content><h3>2</h3></div>
-      <div nz-carousel-content><h3>3</h3></div>
-      <div nz-carousel-content><h3>4</h3></div>
+      <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
       `:host ::ng-deep .ant-carousel .slick-slide {
@@ -24,10 +21,13 @@ import { Component, OnInit } from '@angular/core';
   ]
 })
 export class NzDemoCarouselFadeComponent implements OnInit {
-
+  array = [];
   constructor() {
   }
 
   ngOnInit() {
+    setTimeout(_ => {
+      this.array = [ 1, 2, 3, 4 ];
+    }, 500)
   }
 }
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-vertical.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-vertical.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+
 @Component({
   selector: 'nz-demo-carousel-vertical',
   template: `
     <nz-carousel [nzVertical]="true">
-      <div nz-carousel-content><h3>1</h3></div>
-      <div nz-carousel-content><h3>2</h3></div>
-      <div nz-carousel-content><h3>3</h3></div>
-      <div nz-carousel-content><h3>4</h3></div>
+      <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
       `:host ::ng-deep .ant-carousel .slick-slide {
@@ -17,17 +15,22 @@ import { Component, OnInit } from '@angular/core';
       color: #fff;
       overflow: hidden;
     }
+
     h3 {
       color: #fff;
     }
     `
   ]
 })
 export class NzDemoCarouselVerticalComponent implements OnInit {
+  array = [ 1, 2, 3 ]; // try dynamic change the array
 
   constructor() {
   }
 
   ngOnInit() {
+    setTimeout(() => {
+      this.array = [ 1, 2, 3, 4 ];
+    }, 500)
   }
 }