Angular Material：如何在 TS 中设置不同背景颜色的每个 mat-horizontal-stepper 步进器图标

Question

我无法设置图标颜色

我有一个带有五个垫子步骤的垫子水平步进器（例如命名为 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-step 属性时被忽略。 仅当我将步骤标签包含在其中并在其中使用它时才有效，但这不是要求（我需要更改图标的背景颜色......而不是标签）。

预期结果：能够根据每个步骤的完成程度为每个步骤设置不同的列。 （mat-steps 可以是黄色、红色、绿色和黑色的组合），

实际结果：无法根据组件变量设置更改图标颜色

Answer 1

问题实际上是关于通过 TS 控制 CSS 变量 - 我从这篇文章中得到了帮助；

CSS：我们将 3 个变量分配给我们需要着色的 3 个图标
HTML：我们创建2周的div firstClass和secondClass除了<body>这是我们可以指定唯一命名的变量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;
  }

}

在这里完成工作 stacblitz

Angular Material：如何在 TS 中设置不同背景颜色的每个 mat-horizontal-stepper 步进器图标

问题描述

1 个解决方案

解决方案1
3 已采纳 2019-07-30 05:47:27

Angular Material：如何在 TS 中设置不同背景颜色的每个 mat-h​​orizo​​ntal-stepper 步进器图标

问题描述

1 个解决方案

解决方案1 3 已采纳 2019-07-30 05:47:27

Angular Material：如何在 TS 中设置不同背景颜色的每个 mat-horizontal-stepper 步进器图标

解决方案1
3 已采纳 2019-07-30 05:47:27