Angular 8: Select ng-content 的第一个元素

Question

我想创建一个需要显示 ng-content 的多步骤表单组件。

它应该不是一次显示，而是每一步只显示一个。

因此，以下代码应生成两步表单。

<ion-content>
  <div class="centered">
    <app-multi-step-formular>
      <div>
        <!-- Step One -->
        <input type="text"/>
        <input type="password"/>
      </div>
      <div>
        <!-- Step Two -->
        <input type="text"/>
        <input type="password"/>
      </div>
    </app-multi-step-formular>
  </div>
</ion-content>

我目前的方法如下所示：

<div class="multi-step-form">
  <div class="content">
    <!-- Initially the first div is displayed -->
    <ng-content select="div:1"></ng-content>
    <!-- User clicks next, then second div is displayed -->
    <ng-content select="div:2"></ng-content>
  </div>
  <!-- After clicking the next button, the next div from ng-content should be displayed-->
  <button (click)="nextStep()>
    Continue
  </button>
</div>

参考Ionic 的幻灯片是我想在技术 POV 中实现的一个很好的例子。

我真的很感谢任何帮助。

Answer 1

“经典”是创建一个指令，

import { Directive } from '@angular/core';

@Directive({
  selector: '[custom-slide]'
})
export class CustomSlideDirective {
  constructor() { }
}

然后你只需要询问ContentChildren

   @ContentChildren(CustomSlideDirective) slides!: QueryList<CustomSlideDirective>;

然后， this.slides.first是第一张幻灯片（注意在视图初始化后需要使用）

是的，这有义务写一些像

   <app-multi-step-formular>
      <div custom-slide>
           ....
      </div>
      <div custom-slide>
           ....
      </div>
    </app-multi-step-formular>