Swiper 幻灯片未在 ionic 5.7 中显示答案

【问题标题】：Swiper slide is not displaying in ionic 5.7Swiper 幻灯片未在 ionic 5.7 中显示
【发布时间】：2021-11-05 06:05:55
【问题描述】：

我创建了 Ionic-Angular PWA。我已将 ionic 版本更新为 5.7.0。根据这个新的更新，我正在尝试用 swiper-slide 替换 ion-slides，因为 ion-slides 已被弃用。

刷卡器：6.8.4
离子：5.7.0
角度：12.0.2

在我的代码中

app.module.ts

import { SwiperModule } from 'swiper/angular';
@NgModule({
   imports: [SwiperModule],
 })

组件.ts

import SwiperCore, { Navigation, Pagination } from 'swiper';
import { IonicSwiper } from '@ionic/angular';

SwiperCore.use([IonicSwiper, Navigation, Pagination]);
export class GenesisPage implements OnInit {
  slideOpts = {
    initialSlide: 0,
    speed: 400,
    loop: true,
    autoplay: {
    disableOnInteraction: false
   },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet(index, className) {
      const newClass = `${className} myCustomPager`;
      return `<span class="${newClass}"></span>`;
    }
}

};

component.html

<swiper [pagination]="slideOpts.pagination" [initialSlide]="slideOpts.initialSlide"
                [speed]="slideOpts.speed" [loop]="slideOpts.loop" [autoplay]="slideOpts.autoplay">
                <swiper-slide>
                    <div class="image-wrapper">
                        <img loading="lazy" *ngIf="!webp" width="640" height="360"
                            src="assets/images/genesis/launch-slide-1-new.png" class="first" alt="launch slide"
                            useImg />
                        <img loading="lazy" *ngIf="webp" width="640" height="360"
                            src="assets/images/genesis/launch-slide-1-new.webp" class="first" alt="launch slide"
                            useImg />
                    </div>
                    <div class="slide-content-wrap">
                        <h2>DISCOVER</h2>
                        <p>& EXPLORE</p>
                    </div>
                </swiper-slide>
            </swiper>

我收到如下错误

谁能帮我解决这个问题。提前致谢。

【问题讨论】：

这里与 angular 11 相同。向模块添加架构时：[CUSTOM_ELEMENTS_SCHEMA]，错误消失了，但我得到了一个空白页
找到答案的运气好吗？
我在 Angular 12 中也遇到了同样的问题

标签： angular ionic-framework swiper.js

【解决方案1】：

我也面临同样的问题。尝试在 Ionic 页面的模块文件中导入“SwiperModule”而不是主“app.module.ts”

// page-name.module.ts

import { SwiperModule } from 'swiper/angular';
@NgModule({
   imports: [SwiperModule],
 })

【讨论】：

【解决方案2】：

我发现 swiper-slide 不起作用，所以我根据 Swiperjs.com 使用以下内容

<swiper
  [pagination]="{type: 'fraction'}"
  [navigation]="true"
  class="mySwiper">
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
  </swiper>

【讨论】：

是的，这是有效的，这不是离子方式。它是棱角分明的风格。是标签