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

Question

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

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

感谢大家:)

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" alt="...">
            <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>

刷机-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
  

}

Answer 1

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

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

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

Angular and SwiperJS - Reset nested slider index on parent slider index change

angular

swiper

swiperjs

swiper.js