Ionic 5 angular - 将 ion-slides 迁移到 swiper.js

Posted 2023-05-08

【中文标题】Ionic 5 angular - 将 ion-slides 迁移到 swiper.js

【英文标题】：Ionic 5 angular - migrate ion-slides to swiper.js

【发布时间】：2021-11-02 23:26:32

【问题描述】：

我收到了一个警告，因为我使用 ion-slides 说 ion-slide 已被贬低，并将在 ionic v7 中删除。建议改用swipper.js。

现在我按照swiper.js 教程学习如何将 swiper 与 Ionic-angular 项目集成。

已安装的刷卡器

npm install swiper@6

添加样式

@import '~swiper/swiper';
@import '~@ionic/angular/css/ionic-swiper';

应用模块

import  SwiperModule  from 'swiper/angular';

@NgModule(
  declarations: [AppComponent],
  ...
  imports: [
    ...
    SwiperModule
  ],
  ...
)

gallery.component.html

<swiper>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper>

gallery.component.ts

import SwiperCore from 'swiper';
import  IonicSwiper  from '@ionic/angular';

SwiperCore.use([IonicSwiper]);

我得到的错误是：

NG0304：'swiper' 不是已知元素

NG0304：'swiper-slide' 不是已知元素

在哪里导入缺少的组件？

我已经尝试导入SwiperComponent

import  SwiperComponent  from 'swiper/angular';

  declarations: [
    ...
    SwiperComponent
  ],

然后我得到一个错误

错误：类型 SwiperComponent 是 2 个模块声明的一部分

【问题讨论】：

无论你在那个模块中声明了 galleryComponent，你都必须导入 swiperModule

【参考方案1】：

错误：类型 SwiperComponent 是 2 个模块声明的一部分

当一个组件在 2 个不同的模块中声明时，基本上会出现上述问题。

删除 app.module.ts 中的 SwiperModule 并在图库模块中添加 SwiperModule。您的 gallery.module.ts 应该有 SwiperModule，如下例所示。

gallery.module.ts

import  SwiperModule  from 'swiper/angular';
imports: [
...
SwiperModule
],

【讨论】：

不能解决问题。并且忽略错误也不起作用。对我来说，我不能让这个 sh** 工作。尝试过去 2 小时。

【参考方案2】：

我也遇到了同样的问题！

出现此问题是因为您使用的是旧版本的 @ionic/angular。

为了解决这个问题，在 app.module.ts

中声明 swiper 模块

然后，将您的 @ionic/angular 版本更新到最新版本

npm i @ionic/angular

【参考方案3】：

我也遇到了这个问题。对我有帮助的是控制台中的消息，其中包含指向迁移信息的链接。请参阅 ion-slides (https://ionicframework.com/docs/next/api/slides)，如果您不使用链接，请确保在搜索栏旁边的标题中切换到 v6。根据您使用的框架，有具体的说明。

对于 Angular (https://ionicframework.com/docs/next/angular/slides)，看起来您已经完成了大部分工作。

从您的应用模块中删除 SwiperModule 并将其放置在您的画廊模块中，就像 @dom.macs 建议的那样。

在您的 html 中进行以下更改：

<ion-slides> -> <swiper>
<swiperSlide> -> <ng-template swiperSlide>

您不需要导入 SwiperComponent。

根据您的代码 sn-ps 应该可以解决您的问题。