Angular 和 SwiperJS - 在父滑块索引更改时重置嵌套滑块索引

Posted 2023-05-08

【中文标题】Angular 和 SwiperJS - 在父滑块索引更改时重置嵌套滑块索引

【英文标题】：Angular and SwiperJS - Reset nested slider index on parent slider index change

【发布时间】：2022-01-11 02:28:30

【问题描述】：

我有一个嵌套滑块（一个垂直的，父级的，一个水平的，子级的），我想在父级索引更改时重置子级的索引。幻灯片是根据对象列表动态创建的。

也许有人可以提示我如何获取当前的水平滑动条，以便我可以访问它的索引并进行更改？

谢谢大家:)

swiper-homepage.component.html:

 <div>
  <div class="col-10 offset-1 col-md-3 offset-md-4 col-lg-3 offset-lg-4 col-xl-4 offset-xl-4 center">
    <div class="card">
  <swiper #verticalSwiper [config]="verticalConfig" (swiper)="onVerticalSwiper($event)"
    (slideChange)="onVerticalSlideChange($event)" (transitionEnd)="onVerticalTransitionEnd($event)"
    (transitionStart)="onTransictionStart($event)">

    <ng-template swiperSlide *ngFor="let company of companies">
      <div class="text-white">

        <swiper [attr.ib]="'horSwiper' + currentCompanyIndex" [config]="horizontalConfig"
          (swiper)="onHorizontalSwiper($event)" (transitionEnd)="onHorizontalTransitionEnd($event)"
          (slideChange)="onHorizontalSlideChange($event)">
          <ng-template swiperSlide>
            <detail-slide [company]="company">
            </detail-slide>
          </ng-template>
          <ng-template swiperSlide *ngFor="let multimedia of company.multiMedia">
            <img [src]="multimedia.mediaURL" class="card-img center-page-image" >
            <div class="card-img-overlay lower-third-company-name">
              <button type="button" class="btn btn-light" (click)="goToPage('detail')">
                company.companyName </button>
              <p class="card-text description-with-top-margin"> company.companyDescription </p>
            </div>
          </ng-template>
        </swiper>

      </div>
    </ng-template>

  </swiper>
  
</div>

swiper-homepage.components.ts:

 import  Component, OnInit, ViewChild  from '@angular/core';
import  Router  from '@angular/router';
import  withLatestFrom  from 'rxjs';
import  RouterControllerComponent  from 'src/app/component/router-controller/router-controller.component';
import  GestureController  from 'src/app/interfaces/gesture-controller';
import  Company  from 'src/app/object/company';
import  CompanyService  from 'src/app/service/company.service';
import SwiperCore,  Swiper, SwiperOptions  from 'swiper';
import  SwiperComponent  from 'swiper/angular';

@Component(
  selector: 'app-swiper-homepage',
  templateUrl: './swiper-homepage.component.html',
  styleUrls: ['./swiper-homepage.component.css']
)
export class SwiperHomepageComponent extends RouterControllerComponent implements OnInit

  verticalConfig: SwiperOptions = 
    slidesPerView: 1,
    spaceBetween: 50,
    direction: 'vertical',
    preloadImages: false,
    // Enable lazy loading
    lazy: true,
    initialSlide: 0
  ;

  horizontalConfig: SwiperOptions = 
    slidesPerView: 1,
    spaceBetween: 50,
    direction: 'horizontal',
    preloadImages: false,
    // Enable lazy loading
    lazy: true,
    observeParents: true,
    initialSlide: 1
  

  private currentHorizontalSwiper = new Swiper('', );
  

  public currentCompanyIndex = 0;
  public isReadyToDetail = false;
  public companies: Company[] = [];
  
  constructor(
    private readonly companyService: CompanyService,
    readonly router: Router
  ) 
    super(router);
   

  ngOnInit(): void 
    this.loadPage();
  

  //TODO manage the company arrangement, allow infinite

  loadPage()
    this.companyService.getAllCompanies().subscribe(gettedCompanies =>
      this.companies = gettedCompanies;
    );
  

  onVerticalSwiper(swiper: any) 
    console.log(swiper);
  

  onHorizontalSwiper(swiper: any) 

  onVerticalSlideChange(swiper: any) 
    console.log(swiper);

  

  onHorizontalSlideChange(swiper: any) 
    this.currentCompanyIndex = swiper.activeIndex;
    if(swiper.activeIndex === 0)
      this.isReadyToDetail = true;
  

  onVerticalTransitionEnd(swiper: any)
    console.log("END");
    console.log(swiper);
  

  onHorizontalTransitionEnd(swiper: any)
    if(swiper.activeIndex === 0)
      this.isReadyToDetail = true;
  
  
  onTransictionStart(swiper: any)
    console.log("START");
    console.log(swiper);
  

  onBeforeTransiction(swiper: any)
    console.log("BEFORE START");
    console.log(swiper);
  

  //TODO capire come funzionano gli observer, per resettare i vari index
  

【问题讨论】：

嗨，你不会在初始化时从 swiper 获得滑块实例吗？您可以将实例缓存为类中的属性之一，并在 onVerticalSlideChange 中访问它？

嘿，你能给我举个例子吗？谢谢！

这可能会有所帮助：swiperjs.com/angular#accessing-swiper-reference 这里 this.swiper 是对实例的引用

哦，好吧，但主要问题是我有多个水平滑动器，它们是根据后端响应创建的。我认为我不能使用 @ViewChild 函数来这样做:(

【参考方案1】：

由于我们无法访问动态创建的 swiper 实例，我们可以考虑创建一个包装 Angular 组件（它反过来通过从循环中获取道具来渲染 swiper）并在您的循环中渲染它。 当您的父滑块发生变化时，请使用您首选的 Angular 事件机制来提醒所有包装器组件，以便它们自行重置。

当我们将 swiper props 传递给 wrapper 组件时，我们可以使用 @ViewChild 来获取 swiper 实例

【讨论】：

好的，我会尽力告诉你的。谢谢！

你能给出一些代码示例吗？我遇到了一些问题:(

我不是一个有角的人，可能会导致语法问题。明天试试。

太好了！抱歉，我没有时间研究它。

不，不会影响性能问题。确保包装器中没有不必要的响应式 / 订阅。