删除底层数组项时Angular swiper动态slides不生效问题

Swiper 是纯 JavaScript 实现的库，它的所有自定义事件回调都没有被 Angular 的 Zone.js 托管，因此你在 Swiper 事件回调中修改数组的操作不会触发 Angular 的变更检测机制，视图自然不会更新，这也是为什么你在其他组件中修改数组能生效，只有 Swiper 回调中不生效的核心原因。

• 第一步：在当前组件中注入 NgZone

import { NgZone } from '@angular/core';

// 组件构造器中注入
constructor(private ngZone: NgZone) {}

• 第二步：将所有 Swiper 事件回调中的数组操作，包裹在 ngZone.run() 方法中，示例代码如下：

// slidePrevTransitionEnd 事件回调处理
handlePrevTransitionEnd() {
  this.ngZone.run(() => {
    // 修改数组的操作放这里
    this.slideList.pop();
    // 数组更新后主动调用一次 swiper 的更新方法同步实例状态
    this.swiper.update();
  })
}

// slidesLengthChange 事件回调同理
handleSlidesLengthChange() {
  this.ngZone.run(() => {
    this.swiper.slideTo(this.slideList.length - 1);
  })
}

• 第三步：移除 ngAfterContentChecked 生命周期中重复的 updateSwiper 调用，避免不必要的性能消耗，只需要在数组变更后调用一次 swiper.update() 即可完成状态同步。

修改后触发回滑操作时，ngZone.run() 会主动触发 Angular 变更检测，*ngFor 会响应数组的变化删除对应的 slide 节点，再配合 swiper.update() 同步 Swiper 实例的内部页数、滑动位置等状态，就可以正常实现回滑删除的逻辑。

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