我收到了一个警告,说使用ion-slides
时离子滑片已经过时,将在离子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
],
...
})
图片库.组件.html
<swiper>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
图库.元件.ts
import SwiperCore from 'swiper';
import { IonicSwiper } from '@ionic/angular';
SwiperCore.use([IonicSwiper]);
我得到的错误是:
NG 0304:“swiper”不是已知元素
NG 0304:“swiper-slide”不是已知元素
在哪里导入缺少的组件?
我已尝试导入SwiperComponent
import { SwiperComponent } from 'swiper/angular';
declarations: [
...
SwiperComponent
],
然后收到错误
**错误:**类型SwiperComponent是2个模块声明的一部分
4条答案
按热度按时间ifmq2ha21#
错误:类型 SwiperComponent 是2个模块声明的一部分
当一个组件在两个不同的模块中声明时,就会出现上述问题。
删除app.module.ts中的 SwiperModule,并在图库模块中添加 SwiperModule。您的gallery.module.ts应该具有如下示例所示的 SwiperModule。
图片库.模块.ts
isr3a4wc2#
我也遇到了这个问题。帮助我的是控制台中的消息,其中有一个到迁移信息的链接。请参见ion-slides(https://ionicframework.com/docs/next/api/slides),如果您不使用该链接,请确保在搜索栏旁边的标题中切换到v6。根据您使用的框架,有特定的说明。
对于Angular (https://ionicframework.com/docs/next/angular/slides),看起来你已经走了大部分的路。
从你的应用模块中删除SwiperModule,并像@dom.macs建议的那样将其放在你的图库模块中。
在html中进行以下更改:
不需要导入SwiperComponent。
根据您的代码片段,应该可以修复您的问题。
bfrts1fy3#
我也遇到过同样的问题!
出现此问题的原因是您使用的是**@ionic/angular的旧版本。
为解决此问题,请在app.module.ts**中声明滑动器模块
然后,将您的@离子/Angular 版本更新为最新
npm i @离子/Angular
5gfr0r5j4#
就像Indraraj26在你的问题评论区说的:
无论在哪个模块中声明了galleryComponent,都必须导入swiperModule
此外,请确保使用
<ng-template swiperSlide>Slide 1</ng-template>
而不是<swiper-slide>Slide 1</swiper-slide>
。本质上,
SwiperModule
和**使用<swiper>
**的组件必须位于同一个模块中。