html - Swiper slider SVG 图标有时不显示在 Angular Material svg 图标中

Question

当我使用 Angular Material SVG 图标时，Swiper 有时不显示 SVG 图标。

我正在以这种方式使用 svg 图标 - Svg Icon Reference here

代码

<swiper [config]="expertExperienceConfig">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="certificationProcess"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CERTIFICATION PROCESS</h2>
                                <span>All your qualifications in one place</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="connectExperts"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CONNECT WITH EXPERTS</h2>
                                <span>Talk to other users. Reach out and introduce yourself.</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="linkRecruiters"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>DIRECT LINK TO RECRUITERS</h2>
                                <span>Share and be seen</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="blockchainVerification"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>BLOCKCHAIN VERIFICATION</h2>
                                <span>Trust, Validity, Convenience</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="planJourney"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CERTIFICATION PROCESS</h2>
                                <span>All your qualifications in one place</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="improveEfficiency"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CERTIFICATION PROCESS</h2>
                                <span>All your qualifications in one place</span>
                            </div>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next" hidden id="swiper-button-next"></div>
                    <div class="swiper-button-prev" hidden id="swiper-button-prev"></div>
                </swiper>

TYPE SCRIPT CODE(配置代码)

expertExperienceConfig: SwiperOptions = {
  loop: true,
  direction: 'vertical',
  slidesPerView: 4,
  autoplay: 1000};

为了更清楚，我只附上了图片。所以看看，请有时图标显示或有时不显示。

我正在使用 Angular 6和 swiper "swiper": "^3.4.2"包装这个

Answer 1

感谢这个线程 https://github.com/nolimits4web/swiper/issues/2629#issuecomment-737897281，我能够修复错误.
解决方案
将以下内容添加到您的配置中

private swiper: Swiper
isSwiperReady = false

expertExperienceConfig: SwiperOptions = {
    loop: true,
    slidesPerView: 2,
    navigation: true,
    on: { // <-- Fix the mat-icon error
      slideChangeTransitionStart: (swiper) => {
        if (!this.isSwiperReady) return

        let $wrapperEl = swiper.$wrapperEl
        let params = swiper.params
        $wrapperEl
          .children('.' + params.slideClass + '.' + params.slideDuplicateClass)
          .each(function () {
            let idx = this.getAttribute('data-swiper-slide-index')
            this.innerHTML = $wrapperEl
              .children(
                '.' +
                  params.slideClass +
                  '[data-swiper-slide-index="' +
                  idx +
                  '"]:not(.' +
                  params.slideDuplicateClass +
                  ')',
              )
              .html()
          })
      },

      slideChangeTransitionEnd: (swiper) => {
        if (!this.isSwiperReady) return

        swiper.slideToLoop(swiper.realIndex, 0, false)
      },
    },
};

constructor() {}

ngOnInit() {
  this.swiper = new Swiper('.my-swiper-ref', expertExperienceConfig)
  this.isSwiperReady = true
}

警告

仅当您使用带有自定义 svg 的 mat-icon 时才需要

它将复制 DOM 元素并将其粘贴为下一个

auto选项对我不起作用

isSwiperReady用于修复firefox显示错误