Angular/ng-bootstrap：随轮播幻灯片更新进度条宽度实现问询

很简单，咱们只需要在changeProgress方法里解析出当前幻灯片的索引，再根据索引计算对应的进度百分比就行。具体实现如下：

1. 解析当前幻灯片的索引 #

从你控制台输出的slide对象里，current属性是类似ngb-slide-0这样的字符串，咱们可以通过拆分字符串提取出后面的数字索引：

// 从"ngb-slide-0"中提取出数字0
const slideIndex = parseInt(slide.current.split('-')[2], 10);

2. 计算对应进度百分比 #

你有3张幻灯片，每张对应33.33%、66.66%、100%，这里用通用公式计算，就算以后增减幻灯片数量也不用改逻辑：

this.currentSlide = (slideIndex + 1) * (100 / this.images.length);

这里slideIndex + 1是因为索引从0开始，第一张对应1/3的进度，第二张对应2/3，以此类推。

3. 完整的TypeScript代码修改 #

把你的AppComponent改成这样：

export class AppComponent {
  public currentSlide: number = 33.33; // 初始值对应第一张幻灯片
  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

  changeProgress(slide: any): void {
    // 提取当前幻灯片的索引
    const slideIndex = parseInt(slide.current.split('-')[2], 10);
    // 计算进度百分比，保留两位小数更精准
    this.currentSlide = Number(((slideIndex + 1) * (100 / this.images.length)).toFixed(2));
    console.log(slide, this.currentSlide);
  }
}

补充说明 #

• 初始化currentSlide为33.33，确保页面加载时进度条就对应第一张幻灯片的进度。
• 使用toFixed(2)保留两位小数，避免出现66.66666667这类过长的数字。
• 这个逻辑是通用的，不管你以后有多少张幻灯片，都能自动计算对应的进度百分比，不用硬写固定数值。

你的HTML部分不需要修改，已经正确绑定了[style.width.%]="currentSlide"，轮播的(slide)事件也已经正确关联到changeProgress方法啦。

内容的提问来源于stack exchange，提问作者user10729505