如何制作单独的 angular material 步进器 header 和内容？

Question

我正在用 angular material 做一个垂直步进器。问题是这个步进器将每个步骤的内容放在步骤 header 下面，所以如果有很多步骤，它看起来很糟糕，因为你必须滚动。

我的想法是将 header 与内容分开，这样它看起来更像一个 sidenav，但具有 angular material 功能。

这是我现在所拥有的： actual stepper where the content appears below the header

这就是我想要的 wanted stepper where the content is in the center of the page and the steps headers in the side

我试过像这样编辑 header：

mat-step-header{
  display: flex ;
  justify-content: flex-end ;
}

但它不起作用。

Answer 1

我不确定这在步进器上是否同样有效，但我在选项卡上做了类似的事情。我使用服务在组件之间交换数据。如果您在同一个地方使用内容和 header，您可以尝试使用 2 个步进器。

1 个用于 header，第二个用于内容。您应该能够隐藏第二个选项卡的 header 和第一个选项卡的内容。在第一个选项卡上，您可以使用 selectedIndex 绑定到打字稿中的变量。这样一来，一旦您更改了变量，它就会转到该步骤。要更改变量，您可以创建一个函数 selectionChange，它将从 header-stepper 获取步骤事件并更改变量。据我所见，步进器类似于制表符。所以这应该有效。希望这有帮助。

header 步进器 (selectionChange)="selectionChange($event)"

内容步进器 [(selectedIndex)]="selectedIndex"

Answer 2

这是我为此使用的一种方法，将每个步骤的内容投影到另一个组件中。这避免了使用服务、事件处理程序等。

在我的例子中，我想将当前步骤投影到步进器旁边的扩展面板中。此示例说明如何使用面板操作行中的按钮导航步进器，从步进器填充此的各个部分：

  <mat-stepper #stepper orientation="vertical">
    <ng-template #expansionPanelHeader>
      <ng-container [ngTemplateOutlet]="stepper.selected?.stepLabel.template"></ng-container>                
    </ng-template>

    <ng-template #expansionPanelContent>
      <ng-container [ngTemplateOutlet]="stepper.selected?.content"></ng-container>
    </ng-template>

    <ng-template #expansionPanelActionRow>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </ng-template>

    <mat-step>
      <ng-template matStepLabel>Step 1</ng-template>
      <ng-template matStepContent>
        This is the content of step 1.
      </ng-template>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel>Step 2</ng-template>
      <ng-template matStepContent>
        This is the content of step 2.
      </ng-template>
    </mat-step>
  </mat-stepper>

  <!-- The current step will be projected into this component -->
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <ng-container [ngTemplateOutlet]="expansionPanelHeader"></ng-container>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      <ng-container [ngTemplateOutlet]="expansionPanelContent"></ng-container>
    </ng-template>

    <mat-action-row>
      <ng-container [ngTemplateOutlet]="expansionPanelActionRow"></ng-container>
    </mat-action-row>
  </mat-expansion-panel>

不幸的是，我能找到的防止步进器内容也出现在步进器内部的唯一方法是 CSS:

.mat-vertical-content-container {
  display: none !important;
}

CSS 需要放在全局 .scss 文件中，否则您将需要使用 ng-deep 或其他类似的“解决方案”。我更喜欢前者，作用域为包含元素。

如何制作单独的 angular material 步进器 header 和内容？

How to make separate angular material stepper header and content?

angular

sass

angular-material

angular-material2

angular-material-stepper