如何通過角度2組件模板循環

Question

我正在創建一個將採用@Input（）：Object的主組件。在這個對象中，我想包含一個組件數組，它將依次通過使用* ngFor循環，組件的模板應放置在離子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，然後顯示的組件是基於在項目導航到click事件傳遞的參數第二張幻燈片

因爲幻燈片上的每個組件都相當複雜，在我的情況下我想將組件分離到每個都有自己的邏輯。這與你使用主組件有什麼不同，但是...我不知道它對我有用，也許有更好的方法。

我也有一個問題，如果有說4個組件，我想導航到第四張幻燈片（第三個索引）是否會幻燈片通過它之前的組件，所以用戶會，一秒鐘，看到其他組件查看我不想要的。