Mat-Stepper-将特定步骤更改为点

Question

我看过这篇有关如何删除标题的帖子 Remove the Material Stepper header

但是我要在特定步骤上执行的操作是在显示该数字的跨度上不显示任何内容。

隐藏步进器的内部：

getAttribute()

我尝试使用id和.span：after或只是.span进行显示，但没有运气。

getAttribute()

这是可行的，但我不希望它一起消失..只是数字和特定步骤。

<span class="mat-step-icon-content ng-star-inserted">1</span>

---

  

Udpate

---

#importer > .span{
  display:none;
}

::ng-deep #importer > .mat-horizontal-stepper-header-container {
  display: none !important;
} 

import {
  Component,
  OnInit,
  ViewChild,
  ChangeDetectorRef
} from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators
} from '@angular/forms';
import {
  Entity
} from '../../models/entity';
import {
  EntityComponent
} from '../../entity/entity/entity/entity.component';
import {
  MatStepper
} from '@angular/material';
import {
  stepperActions
} from '../../models/stepper-actions';

@Component({
  selector: 'stepper',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.scss']
})
export class StepperComponent implements OnInit {
  isLinear = false;
  steps = new Array(13);

  constructor(private cd: ChangeDetectorRef) {}

  ngOnInit() {
    this.cd.detectChanges();
  }

}

@mixin hide-option($index, $label: '') {
  mat-step-header:nth-of-type(#{$index}) {
    .mat-step-icon-not-touched span,
    .mat-step-icon span,
    .mat-step-icon-not-touched .mat-icon,
    .mat-step-icon .mat-icon {
      display: none;
    }
    @if ($label=='') {
      .mat-step-icon {
        height: 5px !important;
        width: 5px !important;
      }
    }
    .mat-step-icon-not-touched:after,
    .mat-step-icon:after {
      content: $label;
      position: absolute;
      left: 8px;
      top: 3px;
    }
  }
}

:host /deep/ {
  mat-step-header .mat-step-label {
    overflow: visible;
  }
  @include hide-option(1, '1');
  @include hide-option(2);
  @include hide-option(3);
  @include hide-option(4);
  @include hide-option(5, '2');
  @include hide-option(6);
  @include hide-option(7);
  @include hide-option(8);
  @include hide-option(9, '3');
  @include hide-option(10, '4');
  @include hide-option(11);
  @include hide-option(12, '5');
  @include hide-option(13, '6');
}

<div class="teal-theme">
  <mat-horizontal-stepper [linear]="true" #stepper>
    <mat-step *ngFor="let i of steps" [stepControl]="i.childForm">
      <cby-step #i [stepper]='stepper'></cby-step>
    </mat-step>
  </mat-horizontal-stepper>
</div>

查看其工作方式 https://drive.google.com/file/d/1ScbvJZdwQFUIuBggYe8D0jzEdgjGqLU-/view

问题：

1）步进器的响应能力；

2）正确的样式仅在经过特定的步进步骤之后

Answer 1

您将无法通过使用类来执行此操作，因此它将无法动态运行。如果这不是问题，那么我建议使用SASS mixin创建每个标题项所需的样式。示例：

Demo

@mixin hide-option($index, $label: '') {
  mat-step-header:nth-of-type(#{$index}) {
    .mat-step-icon-not-touched span,
    .mat-step-icon span,
    .mat-step-icon-not-touched .mat-icon,
    .mat-step-icon .mat-icon {
      display: none;
    }

    @if ($label == '') {
      .mat-step-icon {
        height: 5px;
        width: 5px;
      }
    }

    .mat-step-icon-not-touched:after,
    .mat-step-icon:after {
      content: $label;
      position: absolute;
      left: 8px;
      top: 3px;
    }
  }
}

:host /deep/ {

  mat-step-header .mat-step-label {
      overflow: visible;
  }

  @include hide-option(1, '1');
  @include hide-option(2);
  @include hide-option(3);
  @include hide-option(4);
  @include hide-option(5, '2');
  @include hide-option(6);
  @include hide-option(7);
  @include hide-option(8);
  @include hide-option(9, '3');
  @include hide-option(10, '4');
  @include hide-option(11);
  @include hide-option(12, '5');
  @include hide-option(13, '6');
}