angular - 如何检测 Swiper 中幻灯片的点击？

Question

我有一个 Angular 2 组件，其中包含 Swiper 包中的 slider 。我想知道我点击了哪张幻灯片(其索引)。尝试关注Swiper documentation我有这个:

import { Component, AfterViewInit } from "@angular/core";
import Swiper from "swiper";

@Component({
    selector: "challenges",
    templateUrl: "challenges.component.html"
})
export class ChallengesComponent implements AfterViewInit {
    public mySwiper: Swiper;
    public slides = [
        "https://via.placeholder.com/300x200/",
        "https://via.placeholder.com/300x200/",
        "https://via.placeholder.com/300x200/"
    ];

    constructor() { }

    public ngAfterViewInit() {
        this.mySwiper = new Swiper(".swiper-container", {
            slidesPerView: 3,
            spaceBetween: 30,
            pagination: {
                el: ".swiper-pagination",
                type: "bullets",
                clickable: true
            },
            on: {
                click: function(){
                    console.log(this.mySwiper.clickedSlide);
                }
        }
        });
    }
}

问题是，如果我单击一张幻灯片，则会出现此错误 this.mySwiper is undefined。如果 this.mySwiper 是类成员，为什么？

Answer 1

this 处于错误的上下文中。在文档中它说:

Please note, that this keyword within event handler always points to Swiper instance

尝试不使用 mySwiper，仅使用 this.clickedSlide。