如何使用 ngx-swiper-wrapper 替换 swiper 幻灯片或更新 swiper 幻灯片的 HTML？答案

【问题标题】：How can I replace a swiper slide or update the HTML of a swiper slide using ngx-swiper-wrapper?如何使用 ngx-swiper-wrapper 替换 swiper 幻灯片或更新 swiper 幻灯片的 HTML？
【发布时间】：2022-10-06 10:53:05
【问题描述】：

问题- 如何使用新的幻灯片替换滑动幻灯片或使用包装库ngx-swiper-wrapper 编辑幻灯片中的 HTML 内容？

我有这段代码可以创建一个带有幻灯片的滑动滑块，我想在触发 \'slideNextTransitionStart\' 事件时编辑幻灯片或用新的幻灯片替换它。

<swiper 
   [config]=\"config\" 
   [(index)]=\"index\" 
   (slideNextTransitionStart)=\"slideChange($event)\" 
   #swiper>
   <app-member-card *ngFor=\"let member of members\" 
      [routerLink]=\"[\'/members\', member.name]\" 
      [MemberCard]=\"member\">
   </app-member-card>
</swiper>

\"app-member-card\" 是一个自定义组件。我想用新的幻灯片（在打字稿中）替换幻灯片，或者通过打字稿文件修改“成员”对象和现有幻灯片中特定索引处的所有数据。

slideChange(event: any) {
    // not sure what I can do here to change the slide or edit the slides HTML
    const sw = this.swiper;
  }

问题- 我不确定该怎么做。我可以像这样访问 .ts 文件中的 swiper 组件：

@ViewChild(\'swiper\', { static: false }) swiper?: SwiperComponent;

但我找不到任何找到here 的“操作”方法。而且我不确定如何直接编辑 HTML。我可以深入研究组件并获取幻灯片的 HTML，如下所示：

this.swiper.swiperSlides.nativeElement.children[0]

其中 children 是每张幻灯片的 HTMLCollection 数组。但现在呢？

标签： angular typescript swiper.js ngx-swiper-wrapper

【解决方案1】：

我有同样的问题。你找到解决办法了吗？

【讨论】：

这篇文章看起来不像是试图回答这个问题。这里的每一篇文章都应该是明确的尝试回答这个问题;如果您有批评或需要澄清问题或其他答案，您可以在其下方直接post a comment（如这个）。请删除此答案并创建评论或新问题。见：Ask questions, get answers, no distractions