fix(module:carousel): fix adaptive when switching screens (#411)

NG-ZORRO · May 6, 2019 · 4ff06d9 · 4ff06d9 · Guoyuanqiang · May 6, 2019
1 parent cfd733e
commit 4ff06d9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/components/carousel/carousel.component.spec.ts b/components/carousel/carousel.component.spec.ts
@@ -69,6 +69,15 @@ describe('CarouselComponent', () => {
     tick(10);
     expect(component).toBeTruthy();
   }));
+
+  it('should resize work', fakeAsync(() => {
+    const myEvent = new Event('resize');
+    window.dispatchEvent(myEvent);
+    window.dispatchEvent(myEvent);
+    tick(200);
+    fixture.destroy();
+  }));
+
 });
 
 @Component({

diff --git a/components/carousel/carousel.component.ts b/components/carousel/carousel.component.ts
@@ -31,6 +31,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
   };
 
   private _timer: any;
+  private _resizeTimer: any;
   private _nodeArr: Array<any> = [];
   private _lastIndex: number = 0;
   private _isMouseDown: boolean = false;
@@ -172,6 +173,17 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
     }, this.speed);
   }
 
+  @HostListener('window:resize')
+  resize() {
+    if (this._resizeTimer) {
+      clearTimeout(this._resizeTimer);
+    }
+    this._resizeTimer = setTimeout(() => {
+      this.ngAfterViewInit();
+      clearTimeout(this._resizeTimer);
+    }, 200);
+  }
+
   constructor(private _ele: ElementRef) {}
 
   initCarouselSize() {