0

我正在使用swiper 库。在上面链接的 API 中，您可以找到mySwiper.activeIndex返回当前选择的幻灯片。我想要做的是在幻灯片更改时更新我的​​服务，以便我的应用程序知道在其他部分选择了哪张幻灯片（通过共享服务）。

所以我想使用的是ngOnChanges它假设检测组件的每一个变化，但它没有检测到幻灯片的变化，因为我的代码没有console.log任何东西。代码：

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变化？我能做些什么来检测这些变化？

4

1 回答 1

0

这不起作用有两个原因：

首先，ngOnChanges()仅当组件的绑定属性之一发生更改时才会触发，例如@Input变量。

ngOnChanges：

如果至少有一个已更改，则在默认更改检测器检查数据绑定属性后立即调用的回调方法

其次，即使 Swiper 是一个输入属性，对 Swiper 对象的突变也不会导致更改检测触发，请参阅我的另一个答案；只有对数据绑定对象属性的引用更改才会发生。

解决方案

当 touchEnd 事件发生时运行您的“更改”代码：

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

于 2019-05-11T09:09:06.210 回答