Угловой не обнаруживает изменения скольжения Swiper - PullRequest
Новая
       42

Угловой не обнаруживает изменения скольжения Swiper

0 голосов
/ 11 мая 2019

Я использую библиотеку swiper .В ссылке сверху API вы можете обнаружить, что mySwiper.activeIndex возвращает правильно выбранный слайд.То, что я хочу сделать, это обновлять мой сервис каждый раз, когда меняется слайд, чтобы мое приложение знало, какой слайд выбран в других частях (с помощью общего доступа к сервису).

Итак, я хотел использовать ngOnChanges, что предполагаетобнаруживать каждое изменение в компоненте, но он не обнаруживает смену слайдов, потому что мой код ничего не делает.Код: 

import { Component, OnInit, AfterViewInit, OnChanges } from '@angular/core';
import Swiper from 'swiper';
import {TouchService} from "../../services/touch.service";

@Component({
    selector: 'app-nav',
    templateUrl: './nav.component.html',
    styleUrls: [ './nav.component.scss' ]
})
export class NavComponent implements AfterViewInit, OnChanges, OnInit {
    mySwiper: Swiper;

    slides = [
        'Slide1',
        'Slide2',
        'Slide3',
        'Slide4',
        'Slide5',
        'Slide6'
    ];

    constructor(private touchService: TouchService) {}

    ngAfterViewInit() {
        this.mySwiper = new Swiper('.nav', {
            paginationClickable: false,
            grabCursor: true,
            loop: true,
            slidesPerView: 3,
            spaceBetween: 50
        });

        this.mySwiper.on('touchStart', () => {
            this.touchService.triggerTouchStart();
        });
        this.mySwiper.on('touchEnd', () => {
            this.touchService.triggerTouchStop();
        });
    }
    ngOnChanges(changes) {
        console.log(changes);
    }
    ngOnInit() {
        setTimeout(() => {
            alert(this.mySwiper.activeIndex);
        }, 4000);
    }
}

В этом коде setTimeout работает правильно и показывает мне текущий выбранный слайд через 4 секунды после загрузки приложения.Но этот ngOnChanges(changes) {, кажется, никогда не запускается, потому что я не вижу console.logs.

Почему ngOnChanges не перехватывает mySwiper изменения?Что я могу сделать, чтобы обнаружить такие изменения?

1 Ответ

0 голосов
/ 11 мая 2019

Есть две причины, по которым это не работает:

Во-первых, ngOnChanges() будет срабатывать только при изменении одного из связанных свойств компонента, например, переменная @Input.

ngOnChanges

Метод обратного вызова, который вызывается сразу после изменения по умолчанию детектор проверил привязанные к данным свойства, если хотя бы один из них изменился

Во-вторых, даже если Swiper был свойством ввода, мутации объекта Swiper не вызовут срабатывание обнаружения изменений, см. мой другой ответ ; будет изменяться только ссылка на свойство объекта с привязкой к данным.

Решение

Запустите код «изменений» при возникновении события touchEnd:

this.mySwiper.on('touchEnd', () => { this.touchService.triggerTouchStop(); // Your code here. });

...