javascript - Angular 8:选择 ng-content 的第一个元素
问题描述
我想创建一个需要显示 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 中实现的一个很好的例子。
我真的很感谢任何帮助。
解决方案
“经典”是创建一个指令,
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>