使用 ViewChild 在 appComponent Angular 13 中加载 SwiperComponent

Question

我在 angular 13 appCoponent 中有一个简单的旋转木马，我想停止并恢复自动播放，但我发现 swipercomponent 未定义，但它不在任何 ngif 或其他阴影指令后面所以问题可能是因为在文档中只解释了 API 而不是它是如何工作的。组件中代码如下：

import { Component, Pipe, PipeTransform, OnInit, ViewChild} from '@angular/core';
import { SwiperOptions} from 'swiper';
import { SwiperComponent } from 'swiper/angular';
import { EndPointService } from './end-point.service';
import { GraphSite } from './GraphSite';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
@ViewChild('swiperSlideShow') swiperSlideShow!: SwiperComponent;
endPoints:  GraphSite[] =[];

  config: SwiperOptions = {
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
      pauseOnMouseEnter: true
    },
    pagination: { 
      el: '.swiper-pagination', 
      clickable: true 
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
   },
   spaceBetween: 30
  };

 constructor(private endPointService: EndPointService){
 };

  ngOnInit(){
   this.getEndPoints();
  };

  ngAfterViewInit(): void {
      this.swiperSlideShow.autoplay.start();
  }

  getEndPoints(){
    this.endPointService.getEndPoints().subscribe(endPoints => this.endPoints = 
endPoints);
 };

  startCarousell(){
    this.swiperSlideShow.swiperRef.autoplay.start();
  }

  stopCarousell(){
    this.swiperSlideShow.swiperRef.autoplay.stop();
  }

}

它抛出的错误来自 ngAfterViewInit，它说 swiperSlideShow 未定义。

轮播模板如下：

<h1 class="azure">Graph Statistics</h1>
<button (click)="startCarousell" class="azure">Play</button>
<button (click)="stopCarousell" class="azure">Pause</button>
<div>
    <swiper [config]="config">
        <div class="swiper-wrapper">
            <iframe class="swiper-slide"
                    *ngFor="let point of endPoints"
                    [src]="point.src | safe">
            </iframe>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </swiper>
</div>

Answer 1

您的 @ViewChild 绑定不正确。您定义它的方式 Angular 将查找一个名为 swiperSlideShow 的变量，该变量不存在。有两种方法可以解决此问题：

将您的刷卡器组件绑定到一个变量：<swiper #swiperSlideShow [config]="config">
像这样按组件绑定您的 ViewChild：@ViewChild(SwiperComponent) swiperSlideShow!: SwiperComponent;

使用 ViewChild 在 appComponent Angular 13 中加载 SwiperComponent

Loading SwiperComponent in appComponent Angular 13 with ViewChild

swiper

angular