我正在使用角度为7的CDKStepper创建自定义步进器,
我正在使用
<cdk-step>
<ng-template cdkStepLabel>Fill out your name 1</ng-template>
<p>This is any content of "Step 1"</p>
</cdk-step>
和步进模板中-我正在使用导航
<ul class="nav nav-pills wizard-navigation-ul">
<li class="step" *ngFor="let step of steps; let i = index;" [ngClass]="{'active': selectedIndex === i}">
<a href="javascript:void()" (click)="onClick(i, step)" data-toggle="tab">{{step.stepLabel}}</a>
</li>
</ul>
和Component.ts
onClick(index: number, step: any): void {
console.log(step); // here i want to console the title of the step clicked, in this case TEXT of this "<ng-template cdkStepLabel>Fill out your name 1</ng-template>"
this.selectedIndex = index;
}
如何获取存储在<ng-template cdkStepLabel>Fill out your name 1</ng-template>
中的标题?
答案 0 :(得分:0)
对此表示欢迎,并且必须深入了解源代码以寻求解决方案。
CdkStepLabel
指令将TemplateRef
设为公共。
因此,我们可以在CdkStepper
子组件中执行以下操作:
<ng-container [ngTemplateOutlet]="selected.stepLabel.template"></ng-container>
(无论您要执行正确的步骤取决于您)
希望这对将来的搜索者有帮助。