将 id 附加到 mat-step

Question

我正在寻找将 id 附加到 mat 步骤的最佳方法，以便我可以从服务中识别当前步骤。例如

<!-- component.html -->
<mat-stepper #stepper>
<mat-step someId="step1">content1</mat-step>
<mat-step someId="step2">content2<mat-step>
</mat-stepper>

//component.ts

@ViewChild('stepper') stepper: MatStepper
isFirstStep() {
   return this.stepper.selected.someId === "step1"
}

推荐的方法是什么？ 我不想使用索引，因为我动态插入步骤，我也不想在所有 Mat-Steps 上使用 ViewChild，因为我想识别服务中组件外部的步骤，该服务仅引用步进器并知道标签。另外，我不想使用通常的 id 属性，因为我在模板中有两次步进器。

我想使用一个扩展 mat-step 并具有 someId 的组件，但它看起来太复杂了。有更好的办法吗？

Answer 1

我发现你可以使用“状态”，你可以像这样访问它： TS：

public stepperChangeStep(event) {
    if (event.selectedStep.state === "something") {
      // do stuff
    }
 }

HTML：

<mat-horizontal-stepper #stepper (selectionChange)="stepperChangeStep($event)">
  <mat-step label="{{myTitle}}" state="{{customState}}">
  </mat-step>
</mat-horizontal-stepper>

不认为它应该这样使用buuuuuuut...

https://material.angular.io/components/stepper/overview