Angular mehrstufiger Form Routing

Question

I Winkel recht neu bin und ich bin den Aufbau einer mehrstufigen Form unter Verwendung von Winkel 4. Derzeit ist die Komponentenstruktur ist wie folgt:

-apply.component 
--step-one.component 
--step-two.component 
--step-three.component 

Router ist wie folgt aufgebaut:

{ 
path: '', 
redirectTo: '/apply', 
pathMatch: 'full' 
}, 
{ 
path: 'apply', 
component: ApplyComponent, 
children: [ 
    { 
    path: 'personalInfo', 
    component: StepOneComponent, 
    outlet: 'step1' 
    }, 
    { 
     path: 'employmentInfo', 
     component: StepTwoComponent, 
     outlet: 'step2' 
    } 

Router Stellen in ApplyComponent:

<router-outlet name="step1">Child 1 in apply comp</router-outlet> 
<router-outlet name="step2">Child 2 in apply comp</router-outlet> 

Da der Einsatz einen Abschnitt abgeschlossen ist, sollte es versteckte e wie die nächsten Abschnitte zeigen. Jeder Abschnitt ist ein Router-Ausgang auf der übergeordneten Komponente.

Ich versuche herauszufinden, die beste Möglichkeit, die Show/ausblenden von jedem Abschnitt zu orchestrieren. Ich habe herausgefunden, wie man jede Route von der vorherigen Route aus aktiviert, aber wie soll ich die vorherige Route (Sektion) verstecken oder zerstören? Sollte jeder Abschnitt tatsächlich in einem generiert werden? Wie kann ich Interaktionen (zurück/bearbeiten/next) für die verschiedenen Bereiche orchestrieren?

Edit: Eine andere Idee, sollten alle Komponenten im Elternteil definiert werden und dann nur als nächstes zum nächsten Schritt zeigen/verstecken und dann die Route aktualisieren? Ich denke vielleicht rückwärts in meiner aktuellen Implementierung von Router-Update-Komponenten anstelle von Komponenten Update-Route.

Answer 1

Ich würde empfehlen, einen einzelnen Router-Ausgang zu verwenden, um die Schritte anzuzeigen. Entfernen Sie den benannten Router-Ausgang von Ihrer Routen-Konfiguration und entfernen Sie den Namen von der Router-Ausgangs-Markierung. Ich nehme an, Sie haben bereits die nächsten und vorherigen Tasten, um zwischen den Schritten zu wechseln. Jetzt müssen Sie sich nicht mehr um die Logik zum Anzeigen/Verbergen kümmern, der Router erledigt das für Sie. Sie müssen möglicherweise Route Guards hinzufügen, um zu verhindern, dass der Benutzer die URL manipuliert.

Ihr Router Config würde wie folgt aussehen:

{ 
path: 'apply', 
component: ApplyComponent, 
children: [ 
    { 
    path: 'personalInfo', 
    component: StepOneComponent 
    }, 
    { 
     path: 'employmentInfo', 
     component: StepTwoComponent, 
    } 
} 

Ihr einziger Router Ausgang würde wie folgt aussehen:

<router-outlet>Steps will be loaded here</router-outlet>