NgbCarousel select не переключает слайд - PullRequest
Новая
       7

NgbCarousel select не переключает слайд

0 голосов
/ 03 декабря 2018

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

Событие click работает, карусель расположена правильно - я поставил несколько точек останова в коде NgbCarousel, переданном идентификаторе слайдаправильно, и это работает до самого переключения слайда.Однако переключение между ползунками не происходит.

Сама карусель работает просто отлично - и стрелки, и индикаторы.

Angular 6.1.0 Ng-bootstrap 3.2.0

ОБНОВЛЕНИЕ Он начал работать после переустановки узловых модулей.Хотя это очень медленно (10 секунд для коммутатора img без дополнительных сетевых запросов), но это другая история.

Шаблон: 

<div class="thumbs mx-auto">
  <ul *ngIf="pics">
    <li *ngFor="let pic of pics" (click)="switchPic(pic)">
      <figure>
        <img src="{{ getIconUrl(pic) }}">
      </figure>
    </li>
  </ul>
</div>
<ngb-carousel #clotheCarousel="ngbCarousel" *ngIf="pics"
  showNavigationArrows="true"
  showNavigationIndicators="true"
  interval="0">
  <ng-template ngbSlide *ngFor="let pic of pics" id="{{ stripSlash(pic.public_id) }}">
    <figure>
      <img src="{{ getThumbUrl(pic) }}" alt="Pic">
    </figure>
  </ng-template>
</ngb-carousel>

Компонент: 

import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import _ from 'lodash';
import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-clothe-gallery',
  templateUrl: './clothe-gallery.component.html',
  styleUrls: ['./clothe-gallery.component.css']
})
export class ClotheGalleryComponent implements OnInit {
  @Input() pics: object[];
  @Input() private thumbWidth: number = 500;
  @Input() private thumbHeight: number = 500;
  @Input() private iconWidth: number = 100;
  @Input() private iconHeight: number = 100;
  @Input() private getCurrent: object;
  // @Output() slide = new EventEmitter();
  @ViewChild(NgbCarousel) carousel: NgbCarousel;
  private currentSlide: string;
  LOG: string = 'clotheGallery';

  constructor() { }

  ngOnInit() {
    console.log(this.LOG, this.pics);
    if (this.pics && this.pics.length) {
      this.currentSlide = this.pics[0]['public_id'];
    }
    // this.slide.emit({
    //   current: this.currentPic
    // })
  }

  onSlideEvent(event) {
    // console.log('event', event);
    // this.currentSlide = event.current;
    // this.slide.emit({
    //   current: this.currentPic
    // })
  }

  get currentPic() {
    return this.currentSlide;
  }

  getThumbUrl(pic) {
    return ClotheGalleryComponent.insertResizeParams(pic, this.thumbWidth, this.thumbHeight);
  }

  getIconUrl(pic) {
    return ClotheGalleryComponent.insertResizeParams(pic, this.iconWidth, this.iconHeight);
  }

  switchPic(pic) {
    console.log(this.LOG, 'switchPic', this.stripSlash(pic.public_id), this.carousel);
    this.carousel.select(this.stripSlash(pic.public_id));
  }

  stripSlash(item) {
    return item.replace('\/', '');
  }

  static insertResizeParams(pic, thumbWidth, thumbHeight): string {
    if (!pic || !pic.url) {
      return '';
    }
    let replace = 'upload';
    let params = `${replace}/w_${thumbWidth},h_${thumbHeight},c_fit`;
    return pic.url.replace(replace, params);
  }

}

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Попробуйте изменить: 

@ViewChild(NgbCarousel) carousel: NgbCarousel;

на: 

@ViewChild("clotheCarousel") carousel: NgbCarousel;

И использовать (но для этого может потребоваться идентификатор индекса): 

this.carousel.activeId = this.stripSlash(pic.public_id);

вместо:

this.carousel.select(this.stripSlash(pic.public_id));

А также: 

<ng-template ngbSlide *ngFor="let pic of pics" id=" stripSlash(pic.public_id)">
0 голосов
/ 03 декабря 2018

Я не уверен насчет вашего ViewChild (NgbCarousel).Вы уверены, что ваш console.log (this.carousel) показывает карусель?Кстати, вы можете использовать ссылочную переменную в вашей функции 

<!--pass "clotheCarousel" in the function-->
<li *ngFor="let pic of pics" (click)="switchPic(clotheCarousel,pic)">

и 

//use carousel, not this.carousel
switchPic(carousel:any,pic) {
    console.log(this.LOG, 'switchPic', this.stripSlash(pic.public_id), carousel);
    carousel.select(this.stripSlash(pic.public_id));
  }
...