ngx-slick-carousel повторно инициализирует пятно после отмены слияния в Angular

Question

Я использую Angular 7. Я добавил ngx-slick-carousel, как описано здесь: https://www.npmjs.com/package/ngx-slick-carousel.

Я настроил slideConfig так, как я хочу:

slideConfig = {
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    speed: 1400,
    infinite: true,
    lazyLoad: "ondemand",
    responsive: [
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          autoplaySpeed: 2000,
          speed: 100
        }
      }, 
      {
        breakpoint: 575,
        settings: unslick
      }
    ]
  }; 

Я хочу unslick в области просмотра менее 575 пикселей, поэтому я добавил это в slideConfig.Параметры конфигурации объясняются здесь: https://kenwheeler.github.io/slick/

Теперь, если область просмотра вернется больше 575 пикселей, я хочу повторно активировать пятно.

Ни одно из предложенных решенийон-лайн работал.

Вот например, когда я создал ViewChild, печать на консоли не определена. Ссылочный экземпляр slick из компонента (ngx-slick-carousel)

Я упоминал также о решениях, в которых jQuery используется для повторного включения slick, но функции jQuery не идентифицируются в Angular.https://github.com/kenwheeler/slick/issues/1730

Answer 1

Элемент slick carousel в html имеет свойство #slickModal="slick-carousel".

В наш компонент мы импортируем SlickCarouselComponent

import { SlickCarouselComponent } from "ngx-slick-carousel";

и ссылаться на гладкую карусель в переменной

@ViewChild("slickModal") slickModal: SlickCarouselComponent;

теперь мы импортируем HostListener

import { HostListener } from "@angular/core";

и в следующей функции мы определяем ширину области просмотра. Если область просмотра больше, чем точка останова unslick, мы повторно инициализируем пятно.

@HostListener("window:resize", ["$event"])
getScreenSize(event?) {
  if (this.slickModal !== undefined) {
     if (window.innerWidth > 575) {
       if (!this.slickModal.initialized) {
         this.slickModal.initSlick();
       }
     } else if (this.slickModal.initialized) {
       this.slickModal.unslick();
     }
  }
}

обязательно вызовите эту функцию в конструкторе вашего компонента

constructor() {
    this.getScreenSize();
}