如何遍历 Angular 2 组件模板

Question

我正在创建一个主组件，它将接收@Input(): Object。在这个对象中，我想包含一个组件数组，这些组件将依次使用*ngFor 进行循环，并且组件的模板应放置在 Ionic 2 幻灯片中。我尝试了许多不同的方法都无济于事，有什么建议吗？

Answer 1

所以我做了一些类似于你正在尝试的事情。但是，我对每个组件都有其他输入值，但它们位于幻灯片中，并带有基于用户交互的条件。

第一张幻灯片有一个点击事件

<ion-item (click)="gotoInputDetails(0)"

整数决定了调用哪个组件，所以下一个点击事件是

<ion-item (click)="gotoInputDetails(1)"

然后点击方法是这样的

 gotoInputDetails(input: number) {
/**
 * There is only an idx 0 1 on slides. 
 * idx 1 for slide is based on this.showInput which determines which input edit component to show. *ngIf="showInput === 0"
 * 0 = textbox
 * 1 = select
 * 2 = date
 * 3 = range
 * 4 = toggle 
 */
 this.showInput = input;
 this.slides.lockSwipes(false);
 this.slides.slideTo(1);
} 

所以这将始终只滑动到第二个滑块但是显示哪个组件然后基于this.showInput 所以第二张幻灯片有我的所有组件像这样

<ion-slide>
     <!-- Textbox -->
     <page-form-add-input-text *ngIf="showInput === 0"></page-form-add-input-text>
     <!-- Select -->
     <page-form-add-input-select *ngIf="showInput === 1"></page-form-add-input-select>
     <!-- Date -->
     <page-form-add-input-date *ngIf="showInput === 2"></page-form-add-input-date>
     <!-- Range -->
     <page-form-add-input-range *ngIf="showInput === 3"></page-form-add-input-range>
     <!-- Toggle-->
     <page-form-add-input-toggle *ngIf="showInput === 4"></page-form-add-input-toggle>
</ion-slide>

所以它滑动到第二张幻灯片，然后显示的组件基于导航到第二张幻灯片的项目中单击事件上传递的参数。

因为幻灯片上的每个组件在我的情况下都相当复杂，所以我想将组件分开，每个组件都有自己的逻辑。这与您对主组件的要求有点不同，但是……我不知道它对我有用，也许有更好的方法。

我还遇到了一个问题，如果有 4 个组件并且我想导航到第 4 张幻灯片（第 3 个索引），会滑动通过它之前的组件，因此用户会暂时看到另一个我不想要的组件视图。