为啥 Swiper 没有在离子模式上初始化？

Posted 2023-05-08

【中文标题】为啥 Swiper 没有在离子模式上初始化？

【英文标题】：Why Swiper is not being initialised on ionic modal?为什么 Swiper 没有在离子模式上初始化？

【发布时间】：2021-12-18 14:43:10

【问题描述】：

我正在尝试在 Ionic Modal 上使用 Swiper Angular，但未初始化 swiper。当应用程序运行时，它不会在控制台中显示任何错误，但是当检查代码时，我得到了这个：

<swiper _ngcontent-kch-c220="">
  <!--container-->
  <!--container-->
  <!--container-->
</swiper>

这就是我实现 swiper 的方式：

<swiper
  #swiper
  [slidesPerView]="3"
  [spaceBetween]="50"
  (swiper)="onSwiper($event)"
  (slideChange)="onSlideChange()">
  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
</swiper>

组件的模块：

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  SetupConfirmComponent  from '@shared/components/setup-confirm/setup-confirm.component';
import  IonicModule  from '@ionic/angular';
import  SwiperModule  from 'swiper/angular';

@NgModule(
  declarations: [SetupConfirmComponent],
  imports: [CommonModule, IonicModule, SwiperModule],
  exports: [SetupConfirmComponent],
)
export class SetupConfirmModule 

此外，CSS 被导入到主 CSS 文件中，并且目前正在像 swiper 一样完美地在其他组件中工作。

【参考方案1】：

这样做的问题是组件模块没有导入到实际调用模态的组件中。虽然 modal 可以完美运行，但即使没有导入其他模块，它的依赖项（如 swiper）似乎也失败了。