html - Angular/ng-bootstrap - 使用当前幻灯片更改进度条

Question

我的意图是在每张幻灯片中更改进度条的宽度。我目前正在使用 Bootstrap 提供的进度条。到目前为止，我在每张幻灯片中调用 HTML 中的事件。此事件获取有关幻灯片的信息:

Console:
{prev: "ngb-slide-0", current: "ngb-slide-1", direction: "left"}

进度条从 currentSlide (app.component.ts) 获取有关宽度的信息，效果很好:

<div class="progress">
    <div class="progress-bar" role="progressbar" [style.width.%]="currentSlide"></div>
  </div>

typescript 到目前为止的进展:

export class AppComponent {

  public currentSlide: number;

  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

  changeProgress(slide: any): void {
    console.log(slide);
  }
}

我的解决方案路径:

if current: ngb-slide-0 then currentSlide = 33,33
if current: ngb-slide-1 then currentSlide = 66,66 
if current: ngb-slide-2 then currentSlide = 100

如何将这些文字转化为代码？
提前致谢，蒂姆



其余 html( slider 示例):

<div class="container">
  <div class="row">
    <div class="col-12">
      <ngb-carousel *ngIf="images" (slide)="changeProgress($event)">
        <ng-template ngbSlide>
          <img [src]="images[0]" alt="First slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[1]" alt="Second slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[2]" alt="Third slide">
        </ng-template>
      </ngb-carousel>
    </div>
  </div>
</div>

Answer 1

创建一个变量来保存幻灯片中的当前进度百分比，并在您触发 changeProgress 方法时更改该值，并将该百分比绑定(bind)到您的进度条，如下所示:

<div class="progress-bar active" role="progressbar" [style.width.%]="currentPercentage"
             [attr.aria-valuenow]="currentPercentage" aria-valuemin="0" aria-valuemax="100">{{this.currentPercentage}}%</div>

在你的组件中它应该看起来像这样

export class AppComponent {

  public currentSlide: number;
  public currentPercentage: number;

  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

  changeProgress(event: any): void {
    this.currentSlide = Number(event.current.substring(10));//10 because you want to remove the string 'ngb-slide-' and get only the selected image
    this.currentPercentage = this.currentSlide / this.images.length * 100;
  }
}

希望对您有所帮助!这样你将来可以在幻灯片放映中添加更多图像并拥有动态代码(我建议使用 ng-For 来显示你的旋转木马的所有 ng-templates)