如何在 mat-stepper 中传递模板答案

【问题标题】：How to pass a template inside mat-stepper如何在 mat-stepper 中传递模板
【发布时间】：2018-12-20 16:49:04
【问题描述】：

我想这样做：

<ng-template #content>
  <mat-step>step 1</mat-step>
  <mat-step>step 2</mat-step>
</ng-template>

<mat-horizontal-stepper>
  <ng-container *ngTemplateOutlet="content"></ng-container>
</mat-horizontal-stepper>

但我得到了这个错误

错误错误：StaticInjectorError(AppModule)[MatStep -> MatStepper]： StaticInjectorError（平台：核心）[MatStep -> MatStepper]： NullInjectorError: MatStepper 没有提供者！

我认为这是因为 mat-step 在它的构造函数中注入了一个 mat-stepper https://github.com/angular/material2/blob/master/src/lib/stepper/stepper.ts#L53

所以我尝试在上下文中使用 ngOutletContext 传递 stepper

<mat-horizontal-stepper #ContainerStepper="matHorizontalStepper">
  <ng-container *ngTemplateOutlet="content" ngOutletContext="{$implicit:{stepper:ContainerStepper}}"></ng-container>
</mat-horizontal-stepper>

但这不起作用。

有什么想法吗？

【问题讨论】：

解释你为什么需要这样做以及你想要达到的目标。您可以将整个 mat-horizontal-stepper 放在模板中，并获得与您的代码相同的结果。
我需要步进器为垫水平步进器或垫垂直步进器，具体取决于设备布局。步进器中的所有逻辑都保持不变，我不想编写两次代码（约 150 行）。通常，我会有 2 个步进器（水平和垂直），并带有一个 *ngIf，对应于布局。在那些步进器中，我不想复制所有代码
这是一个很好的理由！但目前还不能做你想做的事：github.com/angular/material2/issues/8014。
尝试做完全相同的事情。您是否找到了不涉及复制步进器的解决方案？
不，不幸的是代码重复是不可避免的

标签： angular angular-material angular-material2

【解决方案1】：

你可以试试：

<ng-template #step1Template>
  <form>
    <mat-form-field>
      <input matInput placeholder="Last name, First name" required>
    </mat-form-field>
  </form>
</ng-template>

<ng-template #step2Template>
  <form>
    <mat-form-field>
      <input matInput placeholder="Address" required>
    </mat-form-field>
  </form>
</ng-template>

<mat-horizontal-stepper>
  <mat-step [stepControl]="firstFormGroup">
    <!-- stepper title !-->
    <ng-template matStepLabel>Fill out your name</ng-template>
    <!-- end stepper title !-->

    <!-- stepper content !-->
    <ng-container *ngTemplateOutlet="step1Template"></ng-container>
    <!-- end stepper content !-->

    <!-- stepper footer !-->
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
    <!-- end stepper footer !-->
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <!-- stepper title !-->
    <ng-template matStepLabel>Fill out your address</ng-template>
    <!-- end stepper title !-->

    <!-- stepper content !-->
    <ng-container *ngTemplateOutlet="step2Template"></ng-container>
    <!-- end stepper content !-->

    <!-- stepper footer !-->
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    <!-- end stepper footer !-->
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

<mat-vertical-stepper>
  <mat-step [stepControl]="firstFormGroup">
    <!-- stepper title !-->
    <ng-template matStepLabel>Fill out your name</ng-template>
    <!-- end stepper title !-->

    <!-- stepper content !-->
    <ng-container *ngTemplateOutlet="step1Template"></ng-container>
    <!-- end stepper content !-->

    <!-- stepper footer !-->
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
    <!-- end stepper footer !-->
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <!-- stepper title !-->
    <ng-template matStepLabel>Fill out your address</ng-template>
    <!-- end stepper title !-->

    <!-- stepper content !-->
    <ng-container *ngTemplateOutlet="step2Template"></ng-container>
    <!-- end stepper content !-->

    <!-- stepper footer !-->
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    <!-- end stepper footer !-->
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-vertical-stepper>

【讨论】：