如何实现Angular 2+步骤进度条

Question

我想在Angular2 + TypeScript + SCSS + HTML中实现7步进度条，如上图所示。我不知道该怎么办。

我有7个步骤（创建，分配，进行等）和三个不同的路径（所有7个步骤，在3个步骤后被阻止，在初始步骤被拒绝）

我的想法：

1. 画一条线，添加图标，然后在完成步骤后更改图标。我应该在这里使用路由吗？
2. 添加图像/图标，然后在它们之间添加线条？
3. 添加默认行，然后在其上添加图标/图像并为完成的步骤上色？

我正在为一个网站做准备，因此图标/图像下方的文字应相应调整大小，并且应适用于手机尺寸，尽管此时不需要。角形步进器具有按钮，对我来说有点复杂。我正在已经存在的网站中使用状态变量的内部调用来实现。它将被放置在网站的右上角。

也可以将当前步骤的前两个步骤显示为灰色，并以灰色显示下一步。

如何操作一直令人困惑，我是Angular2 +的新手。

Answer 1

我不久前做了一些类似的事情，但是最终报废了它，所以它不是超级干净。我也只是在写状态名称并给它们涂上不同的颜色，而不是在下面带有标签的图标。我的显示器会在小屏幕上切换到垂直视图。不确定是否会有所帮助，但这是html：

<div
    *ngIf="appeal && statuses && statuses.length > 0 && childVisible"
    fxLayout="row"
    fxLayoutAlign="start center"
    fxLayout.lt-md="column"
    class="py-24"
>
    <ng-container *ngFor="let status of statuses; let last = last; let index = index">
        <span [ngClass]="{ 'green-fg': index <= selection, 'orange-fg text-bold': index === selection }">{{
            status.statusDescription
        }}</span>
        <mat-divider
            fxHide.lt-md="true"
            fxHide="false"
            inset="true"
            fxFlex="1 0 15px"
            *ngIf="!last"
            class="my-0 mx-8"
        ></mat-divider>
        <mat-divider
            fxHide.lt-md="false"
            fxHide="true"
            vertical="true"
            inset="true"
            fxFlex="1 0 10px"
            *ngIf="!last"
            class="mx-0 my-4"
        ></mat-divider>
    </ng-container>
</div>