ngx-owl-carousel-o не работает, возможна перегрузка с помощью решения

Question

У меня следующая проблема: ngx-owl-carousel-o идеально регулирует ширину при первой загрузке, как широкоэкранную, так и мобильную. Проблема в том, что когда на вашем ПК пытаются изменить размер окна, карусель не регулирует его размер.

Я попытался принудительно перезагрузить компонент, используя ChangeDetectorRef при изменении размера окна, но он не работает.

Клиент / src / app / _components / home / carousel / carousel.component.html

<div (resized)="onResize($event)">
    <owl-carousel-o class="carousel-mas-vino" [options]="carouselOptions">
        <ng-container *ngFor="let banner of banners; let id = index" [attr.data-index]="id">
            <ng-template carouselSlide [id]="id">
                <div class="row">
                    <div class="col-md-6 col-lg-4 p-5 p-sm-0 order-1 order-md-0 {{ banner.getBackgroundCSSClass() }}">
                        <div class="container slide-h-min p-2 p-sm-5 pt-md-4 p-md-6 p-lg-6 p-xl-6">
                            <p class="slide-title">{{ banner.getTitle() }}</p>
                            <p class="slide-text">{{ banner.getDescription() }}</p>
                            <p class="position-absolute fixed-bottom ml-2 pl-5 ml-md-0 pl-md-5 pb-md-1 pb-lg-4 ml-lg-4">
                                <a class="btn-slide {{ banner.getButtonCSSClass() }}"><i class="fas fa-angle-right"></i></a>
                                <span class="slide-text-2 {{ banner.getTextCSSClass() }}">{{ banner.getDuration() }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-8 p-0 order-0 order-md-1">
                        <img [src]="banner.getImg()" class="d-block w-100">
                    </div>
                </div>
            </ng-template>
        </ng-container>
    </owl-carousel-o>
</div>

Клиент / src / app / _components / home / carousel/carousel.component.ts

import { Component, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
import { ResizedEvent } from 'angular-resize-event';

import Banner from '../../../_models/Banner';


@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class CarouselComponent {

  public banners: Banner[];

  public carouselOptions: OwlOptions = {
    items: 1,
    margin: 15,
    animateOut: 'fadeOut',
    dots: true,
    loop: true,
    stagePadding: 0,
    nav: true,
    autoWidth: true,
    autoHeight: true,
    navText: [
      '<i class="fas fa-chevron-left"></i>',
      '<i class="fas fa-chevron-right"></i>'
    ],
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true
  }

  constructor(private cdr: ChangeDetectorRef) {
    this.banners = [
      new Banner('La Penúltima Copa', 'El vino está hecho de celebraciones compartidas. Acompaña las andanzas de un turista por degustaciones, ferias y festivales. Descubre si es verdad que todos somos mortales hasta el primer beso y la segunda copa.', '/assets/images/slide1.jpg', '4 CAPÍTULOS DE 5 MINUTOS', 'bg-slide-1', 'btn-slide-1'),
      new Banner('Zoowine', 'La flora y la fauna pueden ser grandes aliadas en el cultivo de las viñas. Para lograr exquisitos vinos se prioriza el equilibrio de todo el ecosistema. Déjate cautivar con las prácticas de una agricultura sostenible.', '/assets/images/slide2.jpg', '6 CAPÍTULOS DE 1 MINUTOS', 'bg-slide-2', 'btn-slide-2', 'text-white'),
      new Banner('1 Minuto x Sabor', 'El vino gana cada vez más terreno en el mundo de la coctelería. De la mano de una barwoman o un bartender descubre maneras creativas de mezclar aromas y sabores. Diviértete probando tragos irresistibles.', '/assets/images/slide3.jpg', '6 CAPÍTULOS DE 1 MINUTO', 'bg-slide-3', 'btn-slide-3', 'text-rojo')
    ]
  }

  public onResize(event: ResizedEvent) {
    this.cdr.markForCheck();
  }
}

Клиент / src / app / _components / home / home.component.html

<app-navigation></app-navigation>

<app-carousel></app-carousel>

<!-- Estrenos -->
<div class="container-fluid pl-5 pt-3">
    <h4 class="estrenos-title">Estrenos<i class="icofont-popcorn icofont-2x"></i></h4>
</div>
<div class="owl-content" id="estrenos">
    <div id="carousel-estrenos" class="owl-carousel owl-theme">
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/lapenultimagrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">La penúltima copa</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/malamadotonicadentro.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Malamado Tonic</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/cassdevinogrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Casas del vino</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/rep.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Rep y el vino</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/lasovejasdekaiken.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Las ovejas de Kaiken</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
    </div>
    <div class="owl-theme">
        <div class="owl-controls">
            <div class="estrenos-nav owl-nav"></div>
        </div>
    </div>
</div>
<!-- Lo más visto -->
<div class="container-fluid pl-5 pt-3">
    <h4 class="lo-mas-visto-title">Lo más visto <i class="fas fa-eye"></i></h4>
</div>
<div class="owl-content" id="lo-mas-visto">
    <div id="carousel-lo-mas-visto" class="owl-carousel owl-theme">
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/lapeatonaldelvino.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">La peatonal del vino</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/elcarruseldelasreinas.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">El carrusel de las reinas</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/aperol.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Aperol Spritz</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/malbecsour.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Malbec Sour</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/diamandes.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Bodega Diamandes, Tunuyán</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
    </div>
    <div class="owl-theme">
        <div class="owl-controls">
            <div class="lo-mas-visto-nav owl-nav"></div>
        </div>
    </div>
</div>
<!-- Explorar -->
<div class="container-fluid pl-5 pt-3">
    <h4 class="explorar-todo-title">Explorar todo <i class="fas fa-search"></i></h4>
</div>
<div class="owl-content" id="explorar-todo">
    <div id="carousel-explorar-todo" class="owl-carousel owl-theme">
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/cassdevinogrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Casas del vino</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/zoowinegrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Zoowine</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/1minutogrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Un minuto por sabor</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/mas_vino_img.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">El ingrediente clave</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/lapenultimagrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">La penúltima copa</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/entrevistasgrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Entre Vistas</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a href="playlist.html">
                <img src="/assets/images/explorar_todo/playgrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Play para degustar</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/mas_vino_img.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Wine Soul</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
    </div>
    <div class="owl-theme">
        <div class="owl-controls">
            <div class="explorar-todo-nav owl-nav"></div>
        </div>
    </div>
</div>
<div class="container-fluid pl-5 pt-3 pb-2">
    <h4 class="explorar-todo-title">En vivo <i class="fas fa-tv"></i></h4>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col text-center">
            <div class="container-fluid live-container" id="en-vivo">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/3Q28f_-fRSA?controls=0"
                    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>
            </div>
        </div>
    </div>
</div>

При первой загрузке на широкоэкранном экране это выглядит следующим образом:

При первой загрузке на мобильном телефоне:

Изменение размера с широкоэкранного на мобильный:

Изменение размера с мобильного на широкоформатный:

Answer 1

Вам необходимо добавить отзывчивый параметр в свой объект OwlOptions. В дополнение к этому, я предлагаю поместить инициализацию опций в метод OnInit, потому что иногда рендеринг на небольших устройствах обычно не выполняется. Смотрите мой код:

Component.ts

    customOptions: OwlOptions;

  constructor() { }

  ngOnInit() {
    setTimeout(() => {
      this.customOptions = {
        loop: true,
        mouseDrag: true,
        touchDrag: true,
        pullDrag: true,
        dots: true,
        navSpeed: 700,
        navText: ['<img src="../assets/images/leftArrow.png" width="20">', '<img src="../assets/images/rightArrow.png" width="20">'],
        responsive: {
          0: {
            items: 1
          }
        },
        nav: true
      }
    }, 300);

  }

Component.html

<div class="body ratings" *ngIf="customOptions">
        <owl-carousel-o [options]="customOptions">
            <ng-template carouselSlide>

....