Angular13中SwiperComponent报swiper属性不存在如何解决

运行时SwiperComponent实例确实挂载了内部核心swiper实例属性，但当前使用的swiper版本中，swiper/angular的TypeScript类型定义文件未将该属性声明为公开属性，导致TS静态类型检查时报TS2551错误，该问题不影响实际运行逻辑。

方法1：类型断言（推荐，保留原有代码逻辑） #

通过交叉类型补全缺失的类型声明，既绕过TS报错，也能保留基础类型提示：

import { SwiperComponent } from 'swiper/angular';
import { QueryList } from '@angular/core';

// ... 组件内其他业务代码
ngAfterViewInit(): void {
  const swiperComp = this.swiperSlideShow.toArray()[0] as SwiperComponent & { swiper: any };
  // 直接访问swiper属性即可，不会触发TS报错
  console.log(swiperComp.swiper);
}

如果项目中多处需要用到这个类型，可以提前声明自定义类型复用：

type TypedSwiperComponent = SwiperComponent & { swiper: any };

方法2：通过组件输出事件获取实例（官方推荐方式，无类型兼容问题） #

SwiperComponent原生提供了swiper输出事件，组件初始化完成后会主动抛出核心swiper实例，不需要通过@ViewChildren查询视图实例：

1. 先修改模板，绑定对应事件：

<swiper [config]="config" (swiper)="onSwiperInit($event)" #swiperSlideShow>
  <!-- swiper幻灯片内容 -->
</swiper>

2. 在组件类中编写对应方法接收实例：

// 存储拿到的核心swiper实例
coreSwiperInstance: any;

onSwiperInit(instance: any) {
  this.coreSwiperInstance = instance;
  // 后续直接通过this.coreSwiperInstance调用slideTo等swiper原生方法即可
}

方法3：临时绕过类型检查（仅适合快速调试，不推荐生产环境使用） #

直接将实例转为any类型跳过TS校验，缺点是会丢失所有类型提示：

ngAfterViewInit(): void {
  const swiperComp = this.swiperSlideShow.toArray()[0];
  console.log((swiperComp as any).swiper);
}

注意：通过@ViewChildren获取实例访问swiper属性时，必须保证逻辑写在ngAfterViewInit及之后的生命周期中，否则可能因为组件未完成初始化拿到undefined值。

内容的提问来源于stack exchange，提问作者softwareplay