Angular：Swiper 轮播无法正常工作 - 错误：node_modules/swiper/angular/angular/src/swiper-events.d.ts

Question

我正在尝试使用 swiper （https://swiperjs.com/angular）创建一个有角度的轮播。

我收到此错误：

错误：node_modules/swiper/Angular/Angular/src/swiper-events.d.ts:3:50 - 错误 TS2344：类型“SwiperEvents[Property]”不满足约束“(...args: any) =>任何'。类型 '((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ... 75 更多... | undefined' 不可分配给类型 '(...args: any) => any'。类型“undefined”不可分配给类型“(...args:any)=>any”。

我已经尝试过这个：

- 使用 npm i swiper 卸载并再次安装 swiper

-卸载 swiper 并使用 npm i @types/swiper 再次安装

这是我的代码：

角度.json

    "styles": [
      "src/myTheme.scss",
      "src/styles.css",
      "node_modules/swiper/swiper-bundle.min.css"
    ],
    "scripts": ["node_modules/swiper/swiper-bundle.min.js"]
  },

共享模块

import { SwiperModule } from 'swiper/angular';
  exports: [
    SwiperModule,
    other modules
  ]

组件：

  config: SwiperOptions = {
    slidesPerView: 3,
    spaceBetween: 50,
    navigation: true,
    pagination: { clickable: true },
    scrollbar: { draggable: true },
  };

//in the methods
  onSwiper([swiper]) {
    console.log(swiper);
  }
  onSlideChange() {
    console.log('slide change');
  }

HTLM

<swiper
      [config]="config"
      (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>
  <ng-template swiperSlide>Slide 4</ng-template>
  <ng-template swiperSlide>Slide 5</ng-template>
  <ng-template swiperSlide>Slide 6</ng-template>
</swiper>

某人知道发生了什么吗？谢谢

Answer 1

我有完全相同的问题。安装 v7 解决了这个问题。

npm i swiper@7