angular-material-stepper - Angular 是否允许嵌套步进器？

Question

我正在尝试嵌套 Angular Material 步进器，以更好地建模业务逻辑（为简洁起见，省略了表单和其他步骤内容）：

<mat-vertical-stepper [linear]="true" #main_stepper>
  <mat-step state="quote">
    <ng-template matStepLabel>
      <strong>What do you need?</strong>
    </ng-template>
    <mat-vertical-stepper
      [linear]="true"
      #quote_stepper>
      <mat-step state="how">
        <ng-template matStepLabel>
          <strong>How?</strong>
        </ng-template>
      </mat-step>
      <mat-step state="where">
        <ng-template matStepLabel>
          <strong>Where?</strong>
        </ng-template>
      </mat-step>
      <mat-step state="what">
        <ng-template matStepLabel>
          <strong>What?</strong>
        </ng-template>
      </mat-step>
      <mat-step state="who">
        <ng-template matStepLabel>
          <strong>Who?</strong>
        </ng-template>
      </mat-step>
    </mat-vertical-stepper>
  </mat-step>
  <mat-step state="choose">
    <ng-template matStepLabel>
      <strong>Which offer would you like?</strong>
    </ng-template>
  </mat-step>
  <mat-step state="review">
    <ng-template matStepLabel>
      <strong>Review and submit your chosen offer</strong>
    </ng-template>
  </mat-step>
</mat-vertical-stepper>

嵌套步进器的步骤正在内部和外部步进器中呈现：

所以..

1. 我在这里做错了吗？
2. 有没有更好的方法来完成我所追求的？

Answer 1

确实创建嵌套步进器会带来一些麻烦，但解决方案是将嵌套步进器作为附加组件：

<mat-vertical-stepper>
  <mat-step>
    <ng-template matStepLabel>Step 1</ng-template>
    <p>...</p>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Step 2</ng-template>
    <p>...</p>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Step 3</ng-template>
    <app-nested-stepper></app-nested-stepper>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Step 4</ng-template>
    <p>...</p>
  </mat-step>
</mat-vertical-stepper>