From b135f5b910d05a4742defe7ee0048f413b60b6d0 Mon Sep 17 00:00:00 2001 From: Wendell Date: Sun, 22 Jul 2018 11:22:01 +0800 Subject: [PATCH] fix(carousel): resize content after window resized (#1815) close #1811 --- components/carousel/nz-carousel.component.ts | 6 ++++++ components/carousel/nz-carousel.spec.ts | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts index ff46e30a462..3cd43e56e9c 100755 --- a/components/carousel/nz-carousel.component.ts +++ b/components/carousel/nz-carousel.component.ts @@ -6,6 +6,7 @@ import { ElementRef, EventEmitter, HostBinding, + HostListener, Input, OnDestroy, Output, @@ -72,6 +73,11 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte @Output() nzAfterChange: EventEmitter = new EventEmitter(); @Output() nzBeforeChange: EventEmitter<{ from: number; to: number }> = new EventEmitter(); + @HostListener('window:resize', [ '$event' ]) + onWindowResize(e: UIEvent): void { + this.renderContent(); + } + get nextIndex(): number { return this.activeIndex < this.slideContents.length - 1 ? (this.activeIndex + 1) : 0; } diff --git a/components/carousel/nz-carousel.spec.ts b/components/carousel/nz-carousel.spec.ts index b7cb9f836cd..b273b0ddce7 100644 --- a/components/carousel/nz-carousel.spec.ts +++ b/components/carousel/nz-carousel.spec.ts @@ -152,6 +152,12 @@ describe('carousel', () => { fixture.detectChanges(); expect(carouselContents[ 2 ].nativeElement.classList).toContain('slick-active'); }); + it('should resize content after window resized', fakeAsync(() => { + const resizeSpy = spyOn(testComponent.nzCarouselComponent, 'renderContent'); + window.dispatchEvent(new Event('resize')); + tick(200); + expect(resizeSpy).toHaveBeenCalled(); + })); }); });