0

我想用这个：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，我不在乎它必须去哪里）。

4

1 回答 1

0

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

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

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

于 2020-01-29T13:31:31.550 回答