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>