Angular Material：如何在 TS 中设置具有不同背景颜色的每个 mat-horizontal-stepper 步进器图标
Posted
技术标签:
【中文标题】Angular Material：如何在 TS 中设置具有不同背景颜色的每个 mat-horizontal-stepper 步进器图标【英文标题】：Angular Material: How to set each mat-horizontal-stepper stepper icon with different background color in TS 【发布时间】：2019-12-07 08:38:36 【问题描述】：我无法设置图标颜色
我有一个带有五个垫子台阶的垫子水平步进器（例如，命名为 A 部分、B 部分 ... E 部分）。根据某些业务规则，每个部分（mat-step）可能有不同的颜色。
我知道如何更改“选定的”垫子步骤或如何更改所有垫子步骤的颜色（颜色相同），但不知道如何动态更改它，因此每个部分可能有不同图标背景颜色。
使用 Angular v7
以下是将第三个垫步图标设置为绿色的样式。 Id 确实有效，但我不知道如何在运行时从组件（打字稿）动态更改颜色。
::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon
background-color: green!important;
我也尝试使用[ngClass]，但在用作垫步属性时会被忽略。仅当我将步骤标签附在其中并在其中使用它时才有效，但这不是必需的（我需要更改图标的背景颜色......而不是标签）。
预期结果： 能够根据每个步骤的完成程度为每个步骤设置不同的列。 （mat-steps 可以是黄色、红色、绿色和黑色的组合），
实际结果： 无法根据组件变量设置更改图标颜色
【问题讨论】：
你也可以给我一些html吗？ 【参考方案1】：问题实际上是关于通过 TS 控制 CSS 变量 - 我从 this post here 获得了帮助；
CSS：我们将 3 个变量分配给我们需要着色的 3 个图标 HTML：除了<body>之外，我们还创建了2个divfirstClass和secondClass，我们可以为其分配唯一命名的变量color1、color2和color3；
由于我们使用'mat-table'，我们不能使用[ngStyle]或[ngClass]，因为材质元素是在运行时创建的，我们只能对其中任何一个AfterViewInit事件进行操作，所以它是在这里，我们为我们的 2 个 div 和 <body> 标签赋值；
相关的CSS：
::ng-deep .mat-step-header:nth-of-type(1) .mat-step-icon
background-color: var(--my-var1);
::ng-deep .mat-step-header:nth-of-type(2) .mat-step-icon
background-color: var(--my-var2);
::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon
background-color: var(--my-var3);
相关HTML：
<div class='firstClass'>
<div class=' secondClass'>
<mat-horizontal-stepper labelPosition="bottom" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" optional>
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
<div>
<div>
相关TS：
import Component, OnInit,AfterViewInit from '@angular/core';
import FormBuilder, FormGroup, Validators from '@angular/forms';
@Component(
selector: 'stepper-label-position-bottom-example',
templateUrl: 'stepper-label-position-bottom-example.html',
styleUrls: ['stepper-label-position-bottom-example.css'],
)
export class StepperLabelPositionBottomExample implements OnInit, AfterViewInit
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
color1:string = 'green';
color2:string = 'yellow';
color3:string = 'red';
constructor(private _formBuilder: FormBuilder)
ngOnInit()
this.firstFormGroup = this._formBuilder.group(
firstCtrl: ['', Validators.required]
);
this.secondFormGroup = this._formBuilder.group(
secondCtrl: ['', Validators.required]
);
ngAfterViewInit()
document.querySelector("body").style.cssText = "--my-var1: "+this.color1;
(<HTMLElement>document.querySelector('.secondClass')).style.cssText = "--my-var2: "+this.color2;
(<HTMLElement>document.querySelector('.firstClass')).style.cssText = "--my-var3: "+this.color3;
完成working stacblitz here
【讨论】：
非常感谢阿克伯！正是我在寻找什么。 只有一堆嵌套的 div 是唯一的解决方法吗？我正在用一个有 5 个步骤的步进器来做这个，它看起来非常混乱。以上是关于Angular Material：如何在 TS 中设置具有不同背景颜色的每个 mat-horizontal-stepper 步进器图标的主要内容，如果未能解决你的问题，请参考以下文章
node_modules/@angular/material/table/cell.d.ts 中的错误 -Typescript 版本问题 angular
错误：node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:64 - 错误 TS1005：';'预期的
Angular2 Material SnackBar 集成问题