fix(module:carousel): fix carousel autoplay bug (#1309)

close #1242

Author: vthinkxie

Diff for: components/carousel/nz-carousel.component.ts

@@ -1,21 +1,19 @@
 import {
+  AfterContentInit,
   AfterViewInit,
   Component,
   ContentChildren,
   ElementRef,
   EventEmitter,
   HostBinding,
   Input,
-  NgZone,
   OnDestroy,
   Output,
   QueryList,
   Renderer2,
   ViewChild
 } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
-import { first } from 'rxjs/operators/first';
-
 import { toBoolean } from '../core/util/convert';
 
 import { NzCarouselContentDirective } from './nz-carousel-content.directive';
@@ -67,15 +65,15 @@ import { NzCarouselContentDirective } from './nz-carousel-content.directive';
     `
   ]
 })
-export class NzCarouselComponent implements AfterViewInit, OnDestroy {
+export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterContentInit {
   private _autoPlay = false;
   private _dots = true;
   private _vertical = false;
   private _effect = 'scrollx';
   slideContentsSubscription: Subscription;
   activeIndex = 0;
   transform = 'translate3d(0px, 0px, 0px)';
-  interval;
+  timeout;
 
   @ContentChildren(NzCarouselContentDirective) slideContents: QueryList<NzCarouselContentDirective>;
   @ViewChild('slickList') slickList: ElementRef;
@@ -153,7 +151,6 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
 
   renderContent(): void {
     if (this.slideContents && this.slideContents.length) {
-      this.slideContents.first.isActive = true;
       this.slideContents.forEach((content, i) => {
         content.width = this.elementRef.nativeElement.offsetWidth;
         if (this.nzEffect === 'fade') {
@@ -187,9 +184,9 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
   }
 
   setUpAutoPlay(): void {
-    this.clearInterval();
+    this.clearTimeout();
     if (this.nzAutoPlay) {
-      this.interval = setInterval(_ => {
+      this.timeout = setTimeout(_ => {
         this.setActive(this.slideContents.toArray()[ this.nextIndex ], this.nextIndex);
       }, 3000);
     }
@@ -202,10 +199,10 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  clearInterval(): void {
-    if (this.interval) {
-      clearInterval(this.interval);
-      this.interval = null;
+  clearTimeout(): void {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
     }
   }
 
@@ -233,24 +230,28 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  constructor(public elementRef: ElementRef, private renderer: Renderer2, private zone: NgZone) {
+  constructor(public elementRef: ElementRef, private renderer: Renderer2) {
+  }
+
+  ngAfterContentInit(): void {
+    if (this.slideContents && this.slideContents.length) {
+      this.slideContents.first.isActive = true;
+    }
   }
 
   ngAfterViewInit(): void {
     this.slideContentsSubscription = this.slideContents.changes.subscribe(() => {
       this.renderContent();
     });
-    this.zone.onStable.pipe(first()).subscribe(() => {
-      this.renderContent();
-    });
+    this.renderContent();
   }
 
   ngOnDestroy(): void {
     if (this.slideContentsSubscription) {
       this.slideContentsSubscription.unsubscribe();
       this.slideContentsSubscription = null;
     }
-    this.clearInterval();
+    this.clearTimeout();
   }
 
 }

Diff for: components/carousel/nz-carousel.spec.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { discardPeriodicTasks, fakeAsync, tick, TestBed } from '@angular/core/testing';
+import { fakeAsync, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { dispatchKeyboardEvent } from '../core/testing';
@@ -109,21 +109,19 @@ describe('carousel', () => {
       fixture.detectChanges();
       expect(carouselWrapper.nativeElement.querySelector('.slick-track').style.transform).not.toBe('translate3d(0px, 0px, 0px)');
     });
-    it('should autoplay work', fakeAsync((done) => {
+    it('should autoplay work', fakeAsync(() => {
+      testComponent.autoPlay = true;
       fixture.detectChanges();
       expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
-      testComponent.autoPlay = true;
       fixture.detectChanges();
       tick(3000 + 10);
       fixture.detectChanges();
-      discardPeriodicTasks();
       expect(carouselContents[ 1 ].nativeElement.classList).toContain('slick-active');
       carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.click();
-      testComponent.autoPlay = true;
       fixture.detectChanges();
       tick(3000 + 10);
       fixture.detectChanges();
-      discardPeriodicTasks();
+      testComponent.nzCarouselComponent.clearTimeout();
       expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
     }));
     it('should func work', () => {