刷卡功能在产品卡内不起作用

Question

角度 17 的滑动器

虽然在另一个组件中工作，但在产品卡内不起作用

产品页面.component.html：

   <div class="card-img-container overflow-auto">
          <div class="swiper-container myProductSwiper" #swiperContainer>
            <div class="swiper-wrapper">
              <!-- Iterate over each image of the product -->
              <ng-container *ngFor="let image of product.images">
                <div class="swiper-slide">
                  <div class="product-item">
                    <img [src]="image" alt="Product Image">
                  </div>
                </div>
              </ng-container>
            </div>
            <!-- Pagination and Navigation outside the ngFor loop -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>

        </div>

产品页面.component.ts：

 import { Navigation, Pagination } from 'swiper/modules';
import Swiper from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
 export class ProductPageComponent implements OnInit ,AfterViewInit  {
  @ViewChild('swiperContainer') swiperContainer!: ElementRef;
  swiper: Swiper | undefined;

  products: Product[] = [];
  isDealerLoggedIn: boolean = false;
  faArrowCircleLeft = faArrowCircleLeft;


  constructor(
    private productService: ProductService,
    private productImageService: ProductImageService,
    private route: ActivatedRoute,
    private router: Router, // Inject Router service
    private dialog: MatDialog,
    private dealerLoginService: DealerLoginService, // Inject DealerLoginService
  ) {     Swiper.use([Navigation, Pagination]);
  }   
ngAfterViewInit(): void {
    console.log('ngAfterViewInit called ');
    this.initializeSwiper();
  }
private initializeSwiper(): void {
    if (this.swiperContainer && this.swiperContainer.nativeElement) {
      this.swiper = new Swiper(this.swiperContainer.nativeElement, {
        slidesPerView: 1,
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        keyboard: {
          enabled: true,
          onlyInViewport: true,
        },
      });
    } else {
      console.error('Swiper container not found or not initialized.');
    }
  }

刷卡器应位于卡片 img 容器内。

是的，我添加了 registerSwiperElements();在我的 main.ts 中并添加了模式：[CUSTOM_ELEMENTS_SCHEMA]，

Answer 1

Swiper推荐使用

swiper-element

，这意味着我们有不同的初始化方式，你可以尝试下面的代码吗？

答案可供参考

完整代码：

HTML：

<swiper-container
  slides-per-view="1"
  speed="500"
  loop="true"
  navigation="true"
  pagination="true"
  #swiper
  scrollbar="true"
>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
  <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
</swiper-container>

TS：

import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-swiper',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './swiper.component.html',
})
export class SwiperComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {}
}

Stackblitz 演示