Angular中访问Swiper的virtual.slides新增幻灯片报错

你使用的Swiper Angular封装库中，SwiperConfigInterface类型定义的virtual字段为联合类型boolean | VirtualOptions：既支持传布尔值直接开关虚拟滚动功能，也支持传对象做精细化配置。TypeScript做静态类型检查时，不会自动推断你当前传入的virtual是对象类型，会判定它存在是布尔值的可能性，而布尔类型上不存在slides属性，因此直接访问会抛出类型错误。

不要把动态幻灯片数据写在配置对象的立即执行函数里，单独抽离slides数据源为类的独立属性，配置项直接引用该属性，后续增删幻灯片直接操作这个独立数据源即可，从根源规避类型访问问题。

1. 首先在类中单独声明幻灯片数组，初始化配置时直接引用该数组：

import { SwiperConfigInterface, SwiperComponent } from 'ngx-swiper-wrapper';

// 组件类内
// 单独维护虚拟幻灯片数据源
swiperVirtualSlides: string[] = [];
// 拿Swiper实例用于后续更新
@ViewChild(SwiperComponent) swiperRef!: SwiperComponent;

memberSwiperConfig: SwiperConfigInterface = {
  virtual: {
    slides: this.swiperVirtualSlides
  },
  preloadImages: false,
  lazy: true,
  slidesPerView: 1,
  spaceBetween: 10,
  watchOverflow: true,
  navigation: true,
  grabCursor: true,
  breakpoints: {
    568: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
    1024: {
      slidesPerView: 2,
      spaceBetween: 10,
    }
  }
}

2. 在ngOnInit中初始化初始幻灯片数据，后续业务逻辑中追加内容也直接操作该数组：

ngOnInit(): void {
  // 初始化首批600张幻灯片
  for (let i = 0; i < 600; i += 1) {
    this.swiperVirtualSlides.push(
      `<img src="https://picsum.photos/600/600/?image=${i+1}"/><p>${i+1}</p>`
    )
  }
}

// 业务事件中追加幻灯片示例
appendSlides() {
  const currentCount = this.swiperVirtualSlides.length;
  // 追加100张新幻灯片
  for (let i = currentCount; i < currentCount + 100; i += 1) {
    this.swiperVirtualSlides.push(
      `<img src="https://picsum.photos/600/600/?image=${i+1}"/><p>${i+1}</p>`
    )
  }
  // 关键：修改完数据必须调用Swiper虚拟滚动的更新方法，否则视图不会刷新
  this.swiperRef.directiveRef?.virtual?.update();
}

如果不想调整现有配置结构，可以选择以下两种方式解决TS报错：

• 类型收窄后访问：访问前先判断virtual不是布尔值，TS会自动将类型收窄为对象类型，即可正常访问slides属性

  const virtualConf = this.memberSwiperConfig.virtual;
  if (typeof virtualConf !== 'boolean' && virtualConf.slides) {
    virtualConf.slides.push('新幻灯片内容');
    // 追加后同样需要调用virtual.update()刷新视图
  }
  

• 类型断言强制指定类型（不推荐，跳过TS校验可能引发运行时错误）：
  先导入VirtualOptions类型，访问时强制指定类型即可

  import { VirtualOptions } from 'ngx-swiper-wrapper';
  // 访问时强制断言
  (this.memberSwiperConfig.virtual as VirtualOptions).slides.push('新幻灯片内容');
  

• 所有对slides数组的修改完成后，必须调用Swiper实例的virtual.update()方法，虚拟滚动模式下Swiper不会自动检测数据源变化，不调用更新方法新增的幻灯片不会渲染。
• 不要通过重新赋值整个memberSwiperConfig对象的方式触发更新，Swiper封装组件不会对配置做深度监听，无法触发重新渲染。

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