Wie man winkelförmige 2-Komponenten-Vorlagen durchläuft

Question

Ich erstelle eine Master-Komponente, die ein @Input(): Object aufnehmen wird. Innerhalb dieses Objekts möchte ich ein Array von Komponenten einschließen, die wiederum mit * ngFor durchgeschleift werden und die Templates der Komponenten sollten in ionische 2 Objektträger gelegt werden. Ich habe versucht, diese vielen verschiedenen Möglichkeiten zu erreichen, ohne Erfolg, irgendwelche Vorschläge?

Answer 1

Also habe ich etwas ähnliches zu dem, was Sie versuchen. Allerdings hatte ich andere Eingabewerte für jede Komponente, aber sie waren in einer Folie mit einer Bedingung basierend auf einer Benutzerinteraktion.

Die erste Folie hatte ein Click-Ereignis

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

Die ganze Zahl bestimmt die Komponente aufgerufen werden würde, so dass der nächste Klick-Ereignis war

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

Dann wird die Click-Methode wie so war

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); 
} 

So wird dies immer nur zum 2. Schieberegler verschoben, aber welche Komponente angezeigt wird wird dann wie so

<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> 

So schiebt sie 2 aus der this.showInput so der zweite Schlitten hat alle meine Komponenten basierend gleiten und dann gezeigt, die Komponente auf dem übergebenen Parameter auf dem Click-Ereignis in dem Punkt der Navigation basiert 2. Folie.

Da jede Komponente auf der Folie in meinem Fall ziemlich komplex ist, wollte ich die Komponenten so trennen, dass jede ihre eigene Logik hat. Das ist ein wenig anders als das, was Sie mit einer Master-Komponente fragen, aber ... ich weiß nicht, es funktioniert für mich, vielleicht gibt es einen besseren Weg.

Ich hatte auch ein Problem, wo, wenn es 4 Komponenten sagen würde und ich zur vierten Folie (3. Index) navigieren wollte, würde die Folie vor ihm vorbeigleiten, so würde der Benutzer für eine Sekunde sehen andere Komponenten anzeigen, die ich nicht wollte.