diff --git a/README.md b/README.md index 37caaa5..2d9d83d 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,6 @@ Simply replace the element that would ordinarily be passed to `Swiper` with the [index] // Can be used to set the active slide index. [disabled] // Disables changing of slides (locks the Swiper). -[performance] // Toggle EventEmitters into performance mode (they run outside angular zone, and don't cause force change detection) [useSwiperClass] // Use 'swiper' class (use provided default styles). @@ -138,6 +137,7 @@ Swiper directive can be used in correctly structured div element with optional c [index] // Can be used to set the active slide index. [disabled] // Disables changing of slides (locks the Swiper). +[performance] // Emit all Swiper events outside the Angular zone. (indexChange) // Event handler for the Swiper index change event. diff --git a/src/lib/swiper.component.html b/src/lib/swiper.component.html index cc1fa15..acc18c0 100644 --- a/src/lib/swiper.component.html +++ b/src/lib/swiper.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/lib/swiper.component.ts b/src/lib/swiper.component.ts index 491188e..b70b20a 100644 --- a/src/lib/swiper.component.ts +++ b/src/lib/swiper.component.ts @@ -30,6 +30,8 @@ export class SwiperComponent implements AfterViewInit, OnDestroy { @Input() disabled: boolean = false; + @Input() performance: boolean = false; + @Input() config?: SwiperConfigInterface; @Input() useSwiperClass: boolean = true; diff --git a/src/lib/swiper.directive.ts b/src/lib/swiper.directive.ts index 6ca99fa..04e8b55 100644 --- a/src/lib/swiper.directive.ts +++ b/src/lib/swiper.directive.ts @@ -85,13 +85,9 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha @Output('slideChangeTransitionEnd' ) S_SLIDECHANGETRANSITIONEND = new EventEmitter(); @Output('slideChangeTransitionStart' ) S_SLIDECHANGETRANSITIONSTART = new EventEmitter(); - constructor( - @Inject(PLATFORM_ID) private platformId: Object, - private zone: NgZone, - private elementRef: ElementRef, - private differs: KeyValueDiffers, - @Optional() @Inject(SWIPER_CONFIG) private defaults: SwiperConfigInterface - ) {} + constructor(@Inject(PLATFORM_ID) private platformId: Object, private zone: NgZone, + private elementRef: ElementRef, private differs: KeyValueDiffers, + @Optional() @Inject(SWIPER_CONFIG) private defaults: SwiperConfigInterface) {} ngAfterViewInit(): void { if (!isPlatformBrowser(this.platformId)) { @@ -160,6 +156,7 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha } const output = `S_${swiperEvent.toUpperCase()}`; + const emitter = this[output as keyof SwiperDirective] as EventEmitter; if (emitter.observers.length) { @@ -175,14 +172,6 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha } } - emit(emitter: EventEmitter, value: any) { - if (!this.performance) { - this.zone.run(() => emitter.emit(value)); - } else { - emitter.emit(value); - } - } - ngOnDestroy(): void { if (this.instance) { this.zone.runOutsideAngular(() => { @@ -229,6 +218,14 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha } } + private emit(emitter: EventEmitter, value: any): void { + if (this.performance) { + emitter.emit(value); + } else { + this.zone.run(() => emitter.emit(value)); + } + } + public swiper(): any { return this.instance; }