angular - Swiper'da bir slayta tıklamayı nasıl algılarım?

Swiper paketinden bir kaydırıcı içeren bir Angular 2 bileşenim var. Hangi slayta (indeksiyle) tıkladığımı bilmek istiyorum. Swiper belgelerini takip etmeye çalışarak şuna sahibim:

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);
                }
        }
        });
    }
}

Sorun şu ki, eğer bir slayta tıklarsam, bana bu hatayı veriyor this.mySwiper tanımsız. Neden, eğer this.mySwiper bir sınıf üyesi ise?

Cevap #1

this yanlış bağlamda. Belgelerde şöyle deniyor:

Lütfen unutmayın, bu anahtar kelime olay işleyici içinde her zaman Swiper örneğine işaret eder

mySwiper olmadan, sadece this.clickedSlide ile deneyin.

Cevap #2

Hiç çaba harcamadan function'ı arrow function'a değiştirebilirsiniz ve fonksiyon kapsamınız this'e bağlanacaktır. Böylece swiper'a bu şekilde erişebilirsiniz!

Başka bir çözüm, ViewChild dekoratörü ile @ViewChild('swiper-container') kullanmaktır

İlgili makaleler