有没有人有在 SSR 的 Angular Unversal 中使用 Swiper.js 的经验？答案

【问题标题】：Does anyone have any experience using Swiper.js in Angular Unversal with SSR?有没有人有在 SSR 的 Angular Unversal 中使用 Swiper.js 的经验？
【发布时间】：2020-10-15 21:13:02
【问题描述】：

我正在尝试实现一个 swiper。我有一个使用 Angular Universal 的应用程序。当我最初加载我的应用程序时，刷卡器会初始化，但是有一个错误让我向左和向右刷得太远。如果我尝试滑动太远，它不仅会弹回。

当我使用刷卡器离开页面然后返回时，刷卡器按预期工作。我假设这与服务器端渲染有关。有没有其他人遇到过这个问题？

这是我的配置：

var sortFilterSwiper = new Swiper("#sortSwiperMobile", {
spaceBetween: 0,
slidesPerView: 'auto',
centeredSlides: false

});

就像我说的，它似乎在浏览器应用程序中运行良好，但我无法让它在服务器上运行。

【问题讨论】：

标签： angular server-side-rendering angular-universal swiper swiperjs

【解决方案1】：

在我的项目中也是这样，但我已经这样修复了：

import { EventReplayer } from 'preboot';


ngAfterViewInit(): void {
 if (isPlatformBrowser(this.platformId)) {
  this.swipeConfig = {
    direction: 'horizontal',
    initialSlide: 0,
    updateOnWindowResize: true,
    preloadImages: false
  };
  this.eventReplayer.replayAll();
  this.cd.markForCheck();
}

}

希望对你有帮助。

【讨论】：

太棒了！这很棒。我有一个不同的更老套的解决方案，所以我很感激。
与我分享 :)
我添加了一个 touchstart 事件来配置 swiper on touch。它大部分时间都有效，但非常粗略。
在 touchstart 之前它是什么样子的？在我的项目中也有响应问题。
这是我的代码的大致概念 (HTML) <div (click)="init = true" (touchstart)="init = true" (touchend)="init = true"><swiper [config]="config" [initialize]="init">...</swiper></div>。技术支持：config: SwiperOptions = { spaceBetween: 0, slidesPerView: 'auto', centeredSlides: false, direction: 'horizontal' };

【解决方案2】：

我在使用带有 Angular Universal Server Side Rendering 的 swiper 时遇到了同样的错误，我安装了 ngx-swiper-wrapper 包，它运行良好，没有任何错误

参考包：https://www.npmjs.com/package/ngx-swiper-wrapper

【讨论】：