离子5迁移离子滑动到swiper.js

Question

我收到一个警告用ion-slides表示，离子滑动被去除，并将在离子v7中去除。建议用swipper.js代替。

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

安装偷窃者

npm install swiper@6

添加样式

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

<<p>应用模块/strong>

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:'swipe -slide'不是已知元素

在哪里导入缺失的组件?

我已经尝试导入SwiperComponent

import { SwiperComponent } from 'swiper/angular';
declarations: [
...
SwiperComponent
],

然后我得到一个错误

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

Answer 1

错误:TypeSwiperComponent是2个模块声明的一部分

上面的问题基本上发生在一个组件在两个不同的模块中声明时。

移除app.module.ts中的SwiperModule并在画廊模块中添加SwiperModule。你的gallery.module.ts应该像下面的例子一样使用SwiperModule。

gallery.module.ts

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

Answer 2

我也遇到过这种情况。帮助我的是控制台中的消息，该消息链接到迁移信息。请参阅离子幻灯片(https://ionicframework.com/docs/next/api/slides)，如果您不使用该链接，请确保在搜索栏旁边的标题中切换到v6。根据您正在使用的框架，有特定的说明。

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

从你的应用模块中删除SwiperModule，并把它放在你的画廊模块中，比如@dom。mac电脑。

在你的html中做以下修改:

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

不需要导入SwiperComponent。

基于你的代码片段，应该解决你的问题。

Answer 3

我也遇到过同样的问题!

出现这个问题是因为你使用的是旧版本的@ionic/angular.

为解决此问题，在app.module.ts中声明swiper模块

那么，把你的@ionic/angular版本更新到最新的

npm i @ionic/angular

Answer 4

LikeIndraraj26在你的问题的评论部分说:

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

确保使用<ng-template swiperSlide>Slide 1</ng-template>而不是<swiper-slide>Slide 1</swiper-slide>。

本质上，SwiperModule和组件都在使用<swiper>，必须住在同一个模块。

@NgModule({
declarations: [
... ,
GalleryComponent,
... ,
],
imports: [ 
... ,
SwiperModule,
... ,
],
})
export class ...Module {}