Stepper

Stepper

关注
发信
关注(28)粉丝(399)

如何在 mat-stepper 中传递模板

本文介绍了如何在 mat-stepper 中传递模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想这样做:

<mat-step>步骤1</mat-step><mat-step>步骤2</mat-step></ng-模板><mat-h​​orizo​​ntal-stepper><ng-container *ngTemplateOutlet="content"></ng-container></mat-h​​orizo​​ntal-stepper>

但我收到此错误

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

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

所以我尝试使用 ngOutletContext

在上下文中传递 stepper

<ng-container *ngTemplateOutlet="content" ngOutletContext="{$implicit:{stepper:ContainerStepper}}"></ng-container></mat-h​​orizo​​ntal-stepper>

但这不起作用.

有什么想法吗?

解决方案

你可以试试:

<表格><mat-form-field><input matInput placeholder="Last name, First name" required></mat-form-field></表单></ng-模板><ng-template #step2Template><表格><mat-form-field><input matInput placeholder="Address" required></mat-form-field></表单></ng-模板><mat-h​​orizo​​ntal-stepper><mat-step [stepControl]="firstFormGroup"><!-- 步进器标题！--><ng-template matStepLabel>填写你的名字</ng-template><!-- 结束步进器标题！--><!-- 步进内容！--><ng-container *ngTemplateOutlet="step1Template"></ng-container><!-- 结束步进内容！--><!-- 步进页脚！--><div><button mat-button matStepperNext>Next</button>

<!-- 结束步进页脚！--></mat-step><mat-step [stepControl]="secondFormGroup"><!-- 步进器标题！--><ng-template matStepLabel>填写您的地址</ng-template><!-- 结束步进器标题！--><!-- 步进内容！--><ng-container *ngTemplateOutlet="step2Template"></ng-container><!-- 结束步进器内容！--><!-- 步进页脚！--><div><button mat-button matStepperPrevious>返回</button><button mat-button matStepperNext>Next</button>

<!-- 结束步进页脚！--></mat-step><垫步><ng-template matStepLabel>完成</ng-template>你现在已经完成了.<div><button mat-button matStepperPrevious>返回</button><button mat-button (click)="stepper.reset()">重置</button>

</mat-step></mat-h​​orizo​​ntal-stepper><mat-vertical-stepper><mat-step [stepControl]="firstFormGroup"><!-- 步进器标题！--><ng-template matStepLabel>填写你的名字</ng-template><!-- 结束步进器标题！--><!-- 步进内容！--><ng-container *ngTemplateOutlet="step1Template"></ng-container><!-- 结束步进器内容！--><!-- 步进页脚！--><div><button mat-button matStepperNext>Next</button>

<!-- 结束步进页脚！--></mat-step><mat-step [stepControl]="secondFormGroup"><!-- 步进器标题！--><ng-template matStepLabel>填写您的地址</ng-template><!-- 结束步进器标题！--><!-- 步进内容！--><ng-container *ngTemplateOutlet="step2Template"></ng-container><!-- 结束步进器内容！--><!-- 步进页脚！--><div><button mat-button matStepperPrevious>返回</button><button mat-button matStepperNext>Next</button>

<!-- 结束步进页脚！--></mat-step><垫步><ng-template matStepLabel>完成</ng-template>你现在已经完成了.<div><button mat-button matStepperPrevious>返回</button><button mat-button (click)="stepper.reset()">重置</button>

</mat-step></mat-vertical-stepper>

I would like to do that :

<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>

but i get this error

I think this is because mat-step inject a mat-stepper in it's constructorhttps://github.com/angular/material2/blob/master/src/lib/stepper/stepper.ts#L53

So I tryed to pass stepper in the context with ngOutletContext

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

but this doesn't work.

Any idea ?

解决方案

You can try:

<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>

这篇关于如何在 mat-stepper 中传递模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-29 01:43
Powered by LMLPHP ©2024 Stepper 0.001539