如何在 mat-stepper 中传递模板 [英] How to pass a template inside mat-stepper
问题描述
我想这样做:
<mat-step>步骤1</mat-step><mat-step>步骤2</mat-step></ng-模板><mat-horizontal-stepper><ng-container *ngTemplateOutlet="content"></ng-container></mat-horizontal-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-horizontal-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-horizontal-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-horizontal-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>