无法在响应模式下单击 primeNg Carousel 内的按钮

Question

我在 angular 项目中使用 PrimeNG v9，
当我切换到 响应模式 时，我无法点击轮播中的按钮，
每次我点击我都会在轮播中获得下一个项目。
这个问题有什么解决办法吗？

这是我的HTML内容：

<p-carousel [value]="services" [numVisible]="3" [numScroll]="1" [circular]="true"
    [responsiveOptions]="responsiveOptions">
    <ng-template let-service pTemplate="item" >
            <div class="img-bg2">
                <img src="{{service.url}}" class="bg-img" />
                <div class=" zero" [ngStyle]="{'background-color':  service.bgColor }"></div>
            </div>
            <div class="content content2">
                <h4>{{service.title}}</h4>
                <p>
                    {{service.body}}
                </p>
                <a routerLink="{{service.goTo}}">
                    EN SAVOIR PLUS
                </a>
            </div>
    </ng-template>
</p-carousel>

你可以在 primeNg 网站上测试它:

激活响应模式
尝试点击里面的按钮

PrimeNg's web site

Answer 1

我找到了解决方案：
我覆盖了轮播中的 changePageOnTouch Class

import {ElementRef, NgZone } from '@angular/core';
import { Carousel } from 'primeng/carousel';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent extends Carousel {

  constructor(public el:ElementRef,
    public zone: NgZone) {
    super(el,zone);
    Carousel.prototype.changePageOnTouch = (e,diff) => {}
}

无法在响应模式下单击 primeNg Carousel 内的按钮

Can't click to button inside primeNg Carousel in responsive mode

carousel

responsive-design

responsive

primeng

angular