Question

我正在尝试创建一个缩略图行以切换轮播的幻灯片。

click事件正在运行，轮播的位置正确-我在NgbCarousel代码中添加了一些断点，传递的幻灯片ID正确，并且可以很好地切换幻灯片。但是幻灯片切换没有发生。

轮播本身就可以正常工作-箭头和指示器。

角度6.1.0 Ng-bootstrap 3.2.0

更新重新安装节点模块后，它开始工作。尽管它很慢（无需额外的网络请求即可进行img切换的时间为10秒），但这是一个不同的故事。

模板：

<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);
  }

}

Answer 1

我不确定您的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));
  }

Answer 2

尝试更改：

@ViewChild(NgbCarousel) carousel: NgbCarousel;

收件人：

@ViewChild("clotheCarousel") carousel: NgbCarousel;

并使用（但可能需要索引ID）：

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)">

Answer 3

有点棘手，选择器为“ ngb-slide-X”，X的当前索引从0开始。

假设您有一张桌子，当您单击一行时，您想要更新图片。

@ViewChild(NgbCarousel, { static: true }) carousel: NgbCarousel;

...

click(id: number, i: number) {
  this.carousel.select('ngb-slide-' + i);
}

   <tbody>
  <tr *ngFor="let signature of signatures$|async; index as i" (click)="click(signature.id, i)" [ngClass]="{selected: signature.selected}">
    <th scope="row">{{ i + 1 }}</th>
    <td>{{ signature.date | date:'shortDate' }}</td>
    <td>{{ signature.client }}</td>
    <td>{{ signature.chauffeur }}</td>
    <td>{{ signature.signataire }}</td>
  </tr>
</tbody>

.....

 <ngb-carousel id="carousel" [showNavigationArrows]="false" [showNavigationIndicators]="false">
  <ng-template ngbSlide *ngFor="let signature of (signatures$ | async)">
    <div class="picsum-img-wrapper">
      <img [src]="signature.url || '/assets/img/none.png'" alt="signature.caption">
    </div>
    <div class="carousel-caption">
      <p>{{ signature.caption }}</p>
    </div>
  </ng-template>
</ngb-carousel>

NgbCarousel select不会切换幻灯片

3 个答案: