如何在Angular项目中实现带分段样式的进度条？

这类进度条属于步骤分段进度条，核心是通过Angular组件+CSS样式实现节点状态切换和进度条动态填充，下面是具体实现方案：

1. 创建Angular组件 #

首先生成进度条组件：

ng generate component step-progress-bar

2. 定义组件数据结构 #

在step-progress-bar.component.ts中定义步骤数据和当前激活步骤索引：

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

export interface Step {
  label: string;
  completed?: boolean;
}

@Component({
  selector: 'app-step-progress-bar',
  templateUrl: './step-progress-bar.component.html',
  styleUrls: ['./step-progress-bar.component.css']
})
export class StepProgressBarComponent {
  @Input() steps: Step[] = [];
  @Input() activeStepIndex: number = 0;

  ngOnInit() {
    // 初始化步骤完成状态
    this.steps.forEach((step, index) => {
      step.completed = index < this.activeStepIndex;
    });
  }

  getProgressWidth(): number {
    if (this.steps.length <= 1) return 0;
    return (this.activeStepIndex / (this.steps.length - 1)) * 100;
  }
}

3. 编写组件模板 #

在step-progress-bar.component.html中构建进度条结构，包含节点、标签和进度轨道：

<div class="progress-container">
  <!-- 步骤节点与标签 -->
  <div class="steps-wrapper">
    <div 
      *ngFor="let step of steps; let i = index"
      class="step-item"
      [ngClass]="{
        'completed': step.completed,
        'active': i === activeStepIndex
      }"
    >
      <div class="step-node">
        <span *ngIf="step.completed">✓</span>
        <span *ngIf="!step.completed && i !== activeStepIndex">{{i + 1}}</span>
        <span *ngIf="i === activeStepIndex">{{i + 1}}</span>
      </div>
      <div class="step-label">{{step.label}}</div>
    </div>
  </div>

  <!-- 进度条轨道 -->
  <div class="progress-track">
    <div 
      class="progress-fill"
      [style.width.%]="getProgressWidth()"
    ></div>
  </div>
</div>

4. 添加CSS样式 #

在step-progress-bar.component.css中实现对应样式，适配不同状态的节点和进度条：

.progress-container {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  position: relative;
}

.steps-wrapper {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.step-node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid #ccc;
  background-color: #fff;
  transition: all 0.3s ease;
}

.step-item.completed .step-node {
  background-color: #2ecc71;
  border-color: #2ecc71;
  color: #fff;
}

.step-item.active .step-node {
  background-color: #3498db;
  border-color: #3498db;
  color: #fff;
}

.step-label {
  font-size: 14px;
  color: #666;
}

.step-item.completed .step-label,
.step-item.active .step-label {
  color: #333;
  font-weight: 500;
}

.progress-track {
  position: absolute;
  top: 16px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ccc;
  z-index: 1;
}

.progress-fill {
  height: 100%;
  background-color: #3498db;
  transition: width 0.3s ease;
}

5. 组件使用示例 #

在父组件中引入并使用该进度条：

<app-step-progress-bar
  [steps]="[
    {label: '信息填写'},
    {label: '文件上传'},
    {label: '审核中'},
    {label: '完成'}
  ]"
  [activeStepIndex]="2"
></app-step-progress-bar>

6. 动态更新进度 #

在父组件中通过修改activeStepIndex即可切换步骤，组件会自动更新状态：

// 父组件逻辑
activeStepIndex = 1;
steps = [
  {label: '信息填写'},
  {label: '文件上传'},
  {label: '审核中'},
  {label: '完成'}
];

nextStep() {
  if (this.activeStepIndex < this.steps.length - 1) {
    this.activeStepIndex++;
  }
}

prevStep() {
  if (this.activeStepIndex > 0) {
    this.activeStepIndex--;
  }
}

你可以根据附图样式调整颜色、节点形状、标签字体等细节，比如把圆形节点改成方形，替换完成图标，只需要修改CSS和模板中的对应部分即可。

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