我正在尝试使用此处提到的 Angular CDK Stepper 创建通用步进器组件 https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper .
我想使用 ngTemplateOutlet 通过模板引用传递步进器的页眉和页脚模板。
当我将按钮中的 cdkStepperPrevious, cdkStepperNext 传递给模板时,模板不起作用。
代码可以在这里找到 https://stackblitz.com/edit/angular-bgyqqz-r8axmr
<ng-template #stepperHeader>
<header>
<h2> Header</h2>
</header>
</ng-template>
<ng-template #stepperFooter>
<button class="example-nav-button" cdkStepperPrevious>Next</button>
<button class="example-nav-button" cdkStepperNext>Previous</button>
</ng-template>
<example-custom-stepper [headerTemplate]="stepperHeader" [footerTemplate]="stepperFooter">
<cdk-step> <p>This is any content of "Step 1"</p> </cdk-step>
<cdk-step> <p>This is any content of "Step 2"</p> </cdk-step>
</example-custom-stepper>
and in my example-custom-stepper component
<section class="example-container">
<ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
<div [style.display]="selected ? 'block' : 'none'">
<ng-container [ngTemplateOutlet]="selected.content"></ng-container>
</div>
<footer class="example-step-navigation-bar">
<ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
</footer>
</section>
错误
preview-4adb70f742b91f09679fb.js:1 错误错误:StaticInjectorError(AppModule)[CdkStep -> CdkStepper]:
StaticInjectorError(平台:核心)[CdkStep -> CdkStepper]:
NullInjectorError:CdkStepper 没有提供程序!
在 NullInjector.get (injector.ts:43)
在 resolveToken (injector.ts:346)
在 tryResolveToken (injector.ts:288)
在 StaticInjector.get (injector.ts:168)
在 resolveToken (injector.ts:346)
在 tryResolveToken (injector.ts:288)
在 StaticInjector.get (injector.ts:168)
在 resolveNgModuleDep (ng_module.ts:125)
在 NgModuleRef_.get (refs.ts:507)
在 resolveDep (provider.ts:423)
最佳答案
请注意 ng-template、ng-container 或 ngTemplateOutlet 不是罪魁祸首。
您正在 cdk-custom-stepper-without-form-example.html 中使用 cdkStepperPrevious 和 cdkStepperNext 指令。查看支持 html 文件的组件。 CdkCustomStepperWithoutFormExample 组件中没有 CdkStepper 提供程序。 cdk 指令只有在您提供 cdkStepper 后才能使用。解决方法可能是将以下代码添加到 @Component 指令中:
提供者:[{ 提供:CdkStepper }]
然而,这并不能解决问题。每当您声明 ng-template 时,模板中的所有指令和事件都会与定义 html 文件的组件相关联。打开开发人员选项并检查显示在 ng-container 内的按钮。您将看到模式 _ngcontent-xxx-c1 的 html 标记。如果您查看其他元素的 html 标记,它们将读取 _ngcontent-xxx-c0。这意味着 ng-container 的内容不属于呈现它的组件。 (Angular 使用 _ngcontent-xxx-c# 标记组件的每个元素,其中 # 是组件的数量。)可以在以下链接中找到更多信息:
What does _ngcontent-c# mean in Angular?
这意味着按钮中指定的 cdkStepperPrevious 和 cdkStepperNext 指令将尝试调用 CdkCustomStepperWithoutFormExample 类中的实现,即使它们是在 CustomStepper 组件中呈现的。但是,该类不扩展 CdkStepper。因此,_stepper 实例将保持未定义。查看 CdkStepperNext/Previous 指令的源代码。
https://github.com/angular/components/blob/master/src/cdk/stepper/stepper-button.ts
这两个指令的构造函数都采用 CdkStepper 类型的 _stepper 实例。这仅在 CustomStepper 类中可用。
所以,如果你想让你的代码工作,你应该在 example-custom-stepper.html 文件中的任何地方定义包含页脚的 ng-template。然后,如果您尝试在 ng-container 中呈现该模板,它将按预期工作,因为 cdkStepperPrevious/Next 指令的构造函数所需的 _stepper 实例在 CustomStepper 类中可用。
1) 从 CdkCustomStepperWithoutFormExample 组件中移除页脚
2) 将其添加到 CustomStepper
关于Angular CDK Stepper Footer 模板通过 ngTemplateOutlet,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56195790/