Angular 8: Выбрать первый элемент 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>

Ссылки Слайды от Ioni c - хороший пример того, чего я хочу достичь в техническом POV.

Я очень благодарен за любую помощь.

Answer 1

"clasi c" - это создание директивы,

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>