angular material svg 图标中有时不显示 Swiper 滑块 SVG 图标

Question

当我使用 angular material 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" 打包这个

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
}

注意

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

angular material svg 图标中有时不显示 Swiper 滑块 SVG 图标

Swiper slider SVG icon doesn't show sometime in angular material svg icon

html

css

svg

swiper

angular

HTML 代码

TYPE SCRIPT CODE（配置代码）

解决方案

注意