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>