Swiper滑块SVG图标有时不会在角度材料svg图标中显示

Posted 2023-03-06

【中文标题】Swiper滑块SVG图标有时不会在角度材料svg图标中显示

【英文标题】：Swiper slider SVG icon doesn't show sometime in angular material svg icon

【发布时间】：2019-07-28 22:34:21

【问题描述】：

当我使用有角度的材质 SVG 图标时，Swiper 有时不显示 SVG 图标。

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

html 代码

<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" 打包这个

【参考方案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

注意

仅当您将 mat-icon 与自定义 svg 一起使用时才需要 它将复制 DOM 元素并将其粘贴为下一个元素 auto 选项对我不起作用 isSwiperReady 用于修复firefox显示错误