Question

我正在创建一个主要组件，它将接收@Input（）：Object。在这个对象中，我想要包含一个组件数组，这些组件将通过使用* ngFor和组件＆＃39;来循环。模板应放在离子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>

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

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

我还遇到了一个问题，如果有4个组件并且我想要导航到第4张幻灯片（第3个索引），那么幻灯片会在它之前传递组件，因此用户会在一秒钟内看到其他组件组件视图，我不想要。

如何循环角度2组件模板

1 个答案: