如何制作单独的角度材料步进标题和内容？

Posted 2023-02-18

【中文标题】如何制作单独的角度材料步进标题和内容？

【英文标题】：How to make separate angular material stepper header and content?

【发布时间】：2019-07-19 23:48:16

【问题描述】：

我正在做一个带有棱角材料的垂直步进器。问题是这个步进器将每个步骤的内容放在步骤标题下方，所以如果有很多步骤，它看起来很糟糕，因为你必须滚动。

我的想法是将标题与内容分开，这样它看起来更像是一个侧导航，但具有角度材料功能。

这里是我现在所拥有的： 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

我尝试过像这样编辑标题：

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

但它不起作用。

【问题讨论】：

您是否将它们放在单独的组件中？

不，我把它们都放在同一个地方。

【参考方案1】：

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

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

标题步进器 (selectionChange)="selectionChange($event)"

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

【讨论】：

成功了！我不知道这是否是最好的解决方案，但现在它已经奏效了。谢谢！

【参考方案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 或其他类似的“解决方案”。我更喜欢前者，仅限于包含的元素。