在 mat-horizontal-stepper 标签之外拥有所有 mat-horizontal-stepper 步骤的主体答案

【问题标题】：Have body of all mat-horizontal-stepper steps outside of the mat-horizontal-stepper tag在 mat-horizontal-stepper 标签之外拥有所有 mat-horizontal-stepper 步骤的主体
【发布时间】：2023-03-31 00:27:01
【问题描述】：

我想用这个：https://material.angular.io/components/stepper/overview

但出于布局（可以是动态的）的目的，我可能会或可能不会在步骤的可点击标题和它的内容之间有元素，我想要步进器的内容（圆形下方的所有内容）图标和步骤的标签）位于 DOM 标记 </mat-horizontal-stepper> 之外。

其他一些组件通过在步骤标签中使用模板名称命名某个变量来实现这一点，并在稍后在 DOM 中声明它。

但是，如果我这样做：

  <div>
    <mat-horizontal-stepper labelPosition="bottom" #stepper class="width">
      <mat-step>
        <ng-template matStepLabel>Prerequisite Check</ng-template>
        <div [ngTemplateOutlet]="first_step"></div>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Check Account Readiness</ng-template>
        <div [ngTemplateOutlet]="second_step"></div>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Open</ng-template>
        <div [ngTemplateOutlet]="third_step"></div>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Migration</ng-template>
        <div [ngTemplateOutlet]="fourth_step"></div>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Deletion Now</ng-template>
        <div [ngTemplateOutlet]="fith_step"></div>
      </mat-step>
    </mat-horizontal-stepper>
  </div>

  <div class="card shadow margin-top controlled-height">
    <ng-template #first_step>
      <div>first_step</div>
    </ng-template>
    <ng-template #second_step>
      <div>second_step</div>
    </ng-template>
    <ng-template #third_step>
      <div>third_step</div>
    </ng-template>
    <ng-template #fourth_step>
      <div>fourth_step</div>
    </ng-template>
    <ng-template #fith_step>
      <div>fith_step</div>
    </ng-template>
  </div>

内容显示在第一个包含步进器的 div 中，而不是卡片。

我的第二次尝试如下（我颠倒了调用者和被调用者）：

  <div>
    <mat-horizontal-stepper labelPosition="bottom" #stepper class="width">
      <mat-step>
        <ng-template matStepLabel>Prerequisite Check</ng-template>
        <ng-template #first_step>
          <div>first_step</div>
        </ng-template>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Check Account Readiness</ng-template>
        <ng-template #second_step>
          <div>second_step</div>
        </ng-template>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Open</ng-template>
        <ng-template #third_step>
          <div>third_step</div>
        </ng-template>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Migration</ng-template>
        <ng-template #fourth_step>
          <div>fourth_step</div>
        </ng-template>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Deletion Now</ng-template>
        <ng-template #fith_step>
          <div>fith_step</div>
        </ng-template>
      </mat-step>
    </mat-horizontal-stepper>
  </div>

  <div class="card shadow margin-top controlled-height">
    <div [ngTemplateOutlet]="first_step"></div>
    <div [ngTemplateOutlet]="second_step"></div>
    <div [ngTemplateOutlet]="third_step"></div>
    <div [ngTemplateOutlet]="fourth_step"></div>
    <div [ngTemplateOutlet]="fith_step"></div>
  </div>

这一次内容显示在我想要的位置，但所有内容同时可见。

材质步进器是否可以在 matstepper 中分离标题和内容？

总结一下：我想让<mat-step> 里面的内容在</mat-horizontal-stepper> 之外（matStepLabel 除外，我不在乎它必须放在哪里）。

【问题讨论】：

标签： angular angular-material angular-material-stepper

【解决方案1】：

我得出结论，使用 mat-stepper 不值得。

我从头开始重建了一个步进器，这很容易。没有任何我真正缺乏的功能 mat stepper 添加。

现在我有了我想要的功能。（分开的正文和可点击的标题）

【讨论】：