angular - cdkStepLabel - ng-模板 - innerHTML

Question

我正在使用 Angular 为 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> 中的标题？

Answer 1

遇到这个问题，不得不深入研究源代码以找到解决方案。

CdkStepLabel 指令具有公开的 TemplateRef。因此，我们可以在我们的 CdkStepper 子组件中执行以下操作:

<ng-container [ngTemplateOutlet]="selected.stepLabel.template"></ng-container>

(无论你想访问正确的步骤取决于你)

希望这对 future 的搜索者有帮助。