Question

我想在窗口大小更改后更改slidesToShow和slidesToScroll变量。我尝试使用@HostListener来检测窗口大小何时更改，但是更改这些变量后ngx-slick组件不会更新。

.ts

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.updateSlidesToShow(window.innerWidth);
}

updateSlidesToShow(width: number) {
  if (width < 576) {
    this.slideConfig.slidesToShow = 1;
    this.slideConfig.slidesToScroll = 1;
  } else {
    this.slideConfig.slidesToShow = 3;
    this.slideConfig.slidesToScroll = 3;
  }
}

slideConfig = {
  'slidesToShow': 3,
  'slidesToScroll': 3,
  'dots': true,
  'autoplay': true,
  'autoplaySpeed': 10000,
};

.html

<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig">
  <div ngxSlickItem *ngFor="let slide of slides" class="slide" style="padding: 0 10px">
    <img src="{{ slide.img }}" alt="" width="100%">
  </div>
</ngx-slick>

Answer 1

由于ngx-slick中的限制，因为他希望传递config对象，并且angular不会在更改该对象的任何属性后运行更改检测。

传递给组件config的{{1}}对象将不会被重新评估为有角度的，因为它不知道它是否已更改，因为它感觉不到属性受到影响。

我建议的唯一解决方法是在以下示例中实现的更改屏幕宽度后重新创建组件 https://stackblitz.com/edit/angular-fucgug

更改窗口大小时刷新HTML组件

1 个答案: