feat(angular): use swipers observer

nolimits4web · Feb 4, 2021 · 30dd7c9 · 30dd7c9
1 parent 81da2a1
commit 30dd7c9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 23 deletions.
diff --git a/src/angular/src/swiper.component.html b/src/angular/src/swiper.component.html
@@ -5,7 +5,7 @@
 </ng-container>
 <div *ngIf="scrollbar && showScrollbar" class="swiper-scrollbar" #scrollbarElRef></div>
 <div *ngIf="pagination && showPagination" class="swiper-pagination" #paginationElRef></div>
-<div [ngClass]="wrapperClass" #wrapperEl>
+<div [ngClass]="wrapperClass">
   <ng-content select="[slot=wrapper-start]"></ng-content>
   <ng-template
     *ngTemplateOutlet="

diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -392,7 +392,6 @@ export class SwiperComponent implements OnInit {
   set paginationElRef(el: ElementRef) {
     this._setElement(el, this.pagination, 'pagination');
   }
-  @ViewChild('wrapperEl', { static: false }) wrapperEl: ElementRef;
   @ContentChildren(SwiperSlideDirective, { descendants: true, emitDistinctChangesOnly: true })
   slidesEl: QueryList<SwiperSlideDirective>;
   private slides: SwiperSlideDirective[];
@@ -443,7 +442,7 @@ export class SwiperComponent implements OnInit {
 
   ngAfterViewInit() {
     this.childrenSlidesInit();
-    this.observeSlidesChanges();
+    // this.observeSlidesChanges();
 
     if (this.init) {
       this.initSwiper();
@@ -472,26 +471,6 @@ export class SwiperComponent implements OnInit {
     this._changeDetectorRef.detectChanges();
   };
 
-  private observeSlidesChanges() {
-    this.zone.runOutsideAngular(() => {
-      const wrapperEl = this.wrapperEl?.nativeElement;
-      if (!wrapperEl) {
-        return;
-      }
-      this.slidesObserver = new MutationObserver((mutations) => {
-        if (this.swiperRef) {
-          this.swiperRef.update();
-        }
-      });
-
-      this.slidesObserver.observe(wrapperEl, {
-        attributes: false,
-        childList: true,
-        characterData: false,
-      });
-    });
-  }
-
   get isSwiperActive() {
     return this.swiperRef && !this.swiperRef.destroyed;
   }
@@ -555,6 +534,9 @@ export class SwiperComponent implements OnInit {
         this._changeDetectorRef.detectChanges();
       },
     });
+
+    swiperParams.observer = true;
+    swiperParams.observeSlideChildren = true;
     new Swiper(this.elementRef.nativeElement, swiperParams);
   }