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

【问题标题】：How to implement a Angular 2+ step progress bar如何实现 Angular 2+ 步骤进度条
【发布时间】：2020-03-15 06:11:36
【问题描述】：

我想在 Angular2+ TypeScript+SCSS+HTML 中实现一个 7 步进度条，如上图所示。我不知道如何继续。

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

我的想法：

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

我正在做一个网站，所以图标/图像下方的文字应该相应地调整大小，并且应该适用于手机大小，尽管目前不需要。 Angular stepper 有按钮，对我来说有点复杂。我正在通过内部调用状态变量在现有网站中实施。它将被放置在网站的右上角。

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

如何去做一直很困惑，我是 Angular2+ 的新手。

【问题讨论】：

标签： html angular typescript sass progress-bar

【解决方案1】：

嗨，我找到了一个解决方案：这个组件在 angular material 中调用“step”在这里有这个解决方案链接在这里找到你的文档https://material.angular.io/components/stepper/overview

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【解决方案2】：

前段时间我做了一些类似的事情，但最后把它报废了，所以它不是超级干净。我也只是写下状态的名称并为它们着色，而不是在下面有带有标签的图标。我的会在小屏幕尺寸上切换到垂直视图。不确定它是否会有很大帮助，但这里是 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>

【讨论】：