Angular6中angular2-useful-swiper返回页面后缺失active类问题求助

我之前在Angular项目里也碰到过类似的swiper路由返回失效问题，大概率是Angular的路由复用机制在搞鬼——组件实例被缓存了，导致swiper的DOM状态和实例没有被正确重置。给你几个亲测有效的解决方案：

当从其他页面返回当前组件时，通过Angular的路由事件监听，在组件被激活时强制更新swiper的状态，确保DOM类和样式同步。

首先在组件中注入路由相关服务，通过ViewChild获取swiper组件实例：

import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { SwiperComponent, SwiperOptions } from 'angular2-useful-swiper';
import { ViewChild, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  // 你的组件元数据
})
export class YourSwiperComponent implements OnInit, OnDestroy {
  @ViewChild(SwiperComponent) swiperComponent: SwiperComponent;
  config: SwiperOptions = { 
    pagination: '.swiper-pagination', 
    paginationClickable: false, 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    spaceBetween: 30, 
    preventClicks:false, 
    preventClicksPropagation:false 
  };
  private routerSub: Subscription;

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // 监听路由完成事件，确认当前组件被激活
    this.routerSub = this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        const currentRoute = this.activatedRoute.snapshot;
        // 验证是否回到当前组件
        if (currentRoute.component === YourSwiperComponent) {
          // 延迟100ms确保DOM已渲染完成
          setTimeout(() => {
            if (this.swiperComponent?.swiper) {
              // 更新swiper实例，同步DOM状态
              this.swiperComponent.swiper.update();
              // 强制切换到第一张，重置active类
              this.swiperComponent.swiper.slideTo(0);
            }
          }, 100);
        }
      }
    });
  }

  ngOnDestroy() {
    // 记得取消订阅，避免内存泄漏
    this.routerSub?.unsubscribe();
  }
}

如果路由监听的方式不生效，可以尝试在Angular的视图检查钩子中，检测swiper实例并更新：

import { SwiperComponent } from 'angular2-useful-swiper';
import { ViewChild, OnInit, AfterViewChecked } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourSwiperComponent implements OnInit, AfterViewChecked {
  @ViewChild(SwiperComponent) swiperComponent: SwiperComponent;
  private hasSwiperUpdated = false;
  config: SwiperOptions = { /* 你的配置 */ };

  ngOnInit() {
    // 每次组件初始化时标记未更新
    this.hasSwiperUpdated = false;
  }

  ngAfterViewChecked() {
    // 仅在第一次视图检查后更新swiper
    if (this.swiperComponent?.swiper && !this.hasSwiperUpdated) {
      this.swiperComponent.swiper.update();
      this.swiperComponent.swiper.slideTo(0);
      this.hasSwiperUpdated = true;
    }
  }
}

如果上面的方法都无法解决，可以针对当前组件禁用路由复用，确保每次返回都创建新的组件实例：

首先创建一个自定义路由复用策略：

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class NoReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {}
  shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null { return null; }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 仅允许相同路由的复用，其他路由不缓存
    return future.routeConfig?.path === curr.routeConfig?.path;
  }
}

然后在当前组件的模块中提供该策略：

import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { NoReuseStrategy } from './no-reuse-strategy';

@NgModule({
  providers: [
    { provide: RouteReuseStrategy, useClass: NoReuseStrategy }
  ]
})
export class YourSwiperModule {}

• 检查swiper容器内是否有动态加载的内容，返回时是否重新渲染，确保swiper在内容加载完成后再初始化；
• 排查是否有自定义指令或第三方库修改了swiper的DOM类，导致active类被意外移除；
• 可以尝试在路由离开时销毁swiper实例，返回时重新创建：

ngOnDestroy() {
  this.swiperComponent?.swiper.destroy(true, true);
}

ngOnInit() {
  // 异步初始化，确保DOM就绪
  setTimeout(() => {
    this.swiperComponent?.init();
  }, 0);
}

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