Question

我正在尝试制作轮播，其速度可以通过用户输入动态控制（例如按钮）。我已经按照ng-bootstrap carousel API中的指示定位了 interval 输入属性，但出于某种原因，我发现幻灯片的速度在用户输入时不会动态变化旋转木马已经在运行，除非我停下来并重新启动旋转木马。我使用下面的代码类似于ngx-bootstrap动态轮播here（我以前使用过）中的代码。

 <!-- Template carousel.html -->

<ngb-carousel #flash="ngbCarousel" [interval]="speed">
<ng-template ngbSlide>
<img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
<div class="carousel-caption">
  <h3>First slide label</h3>
  <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
<div class="carousel-caption">
  <h3>Second slide label</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</ng-template>
  <ng-template ngbSlide>
<img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
<div class="carousel-caption">
  <h3>Third slide label</h3>
  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</ng-template>
</ngb-carousel>


<div>   
<button type="button" (click)="flash.pause()" class="btn btn-warning">
  Pause</button>
<button type="button" (click)="flash.cycle()" class="btn btn-success">
   Start</button>
<input type="number" class="form-control" [(ngModel)]="speed">
</div>

/* Typescript carousel.ts */    

import {Component} from '@angular/core';

@Component({
selector: 'ngbd-carousel-basic',
templateUrl: './carousel.html'
})
export class NgbdCarouselBasic {

 public speed : number;

}

有人可以告诉我一个方法制作按钮或表格输入在运行时动态改变轮播的速度，或者这个功能目前在ng-bootstrap中是不可能的？

Answer 1

使用当前（从1.0.0-alpha.28）ng-bootstrap实施时，除非您暂停/重新启动，否则不会获取动态间隔更改。所以你所观察到的是对当前实现的限制。

您可以在https://github.com/ng-bootstrap/ng-bootstrap/issues中打开一个问题，要求支持此案例。

NgbCarousel指令中的动态更改间隔输入属性

1 个答案: