Ionic 离子5角-将离子载玻片迁移到swiper.js

r1wp621o  于 2022-12-09  发布在  Ionic
关注(0)|答案(4)|浏览(154)

我收到了一个警告,说使用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个模块声明的一部分

ifmq2ha2

ifmq2ha21#

错误:类型 SwiperComponent 是2个模块声明的一部分
当一个组件在两个不同的模块中声明时,就会出现上述问题。
删除app.module.ts中的 SwiperModule,并在图库模块中添加 SwiperModule。您的gallery.module.ts应该具有如下示例所示的 SwiperModule

图片库.模块.ts

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

isr3a4wc2#

我也遇到了这个问题。帮助我的是控制台中的消息,其中有一个到迁移信息的链接。请参见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。
根据您的代码片段,应该可以修复您的问题。

bfrts1fy

bfrts1fy3#

我也遇到过同样的问题!
出现此问题的原因是您使用的是**@ionic/angular的旧版本。
为解决此问题,请在
app.module.ts**中声明滑动器模块
然后,将您的@离子/Angular 版本更新为最新
npm i @离子/Angular

5gfr0r5j

5gfr0r5j4#

就像Indraraj26在你的问题评论区说的:
无论在哪个模块中声明了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 {}

相关问题