router_outlet et assistant les étapes

Question

Permettez-moi de commencer en disant que je suis très novice à angulaire 4.

Nous avons un processus très long pour un utilisateur d'enregistrer dans notre système où ils devront passer par plusieurs processus d'entrée et/ou en vérifiant leurs informations de base, leurs études, leurs antécédents de travail, etc. À cette fin, j'essaie de mettre en œuvre des étapes d'assistant comme le processus.

Je semble avoir un problème avec router_outlet que je n'arrive pas à surmonter.

J'ai un processus similaire à celui de l'assistant où les étapes de l'assistant sont affichées sur toutes les pages et router_outlet changera les étapes ci-dessous les étapes de l'assistant comme vu ci-dessous.

et voici où je commence: app.routing.ts

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'app1', pathMatch: 'full' } 
]; 

app.routing est inclus dans app.module

import { NgModule } from '@angular/core'; 
import { APP_BASE_HREF } from '@angular/common'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 

/*App Root*/ 
import { AppComponent } from './app.component'; 
import { ModalModule } from './Modals/app.modals.module' 
import {App1Module} from './Features/Certification/app1.module' 
//import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal'; 
import { HttpModule } from '@angular/http'; 
import { applicationRouting } from './app.routing'; 

@NgModule({ 
    imports: [BrowserModule, ReactiveFormsModule, HttpModule, applicationRouting, /*Ng2Bs3ModalModule*/ NgbModule.forRoot(), ModalModule, App1Module], 
    declarations: [AppComponent], 
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }], 
    bootstrap: [AppComponent] 
}) 

Voici mon module App1 qui contient son propre routage:

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { Routes, RouterModule } from '@angular/router'; 


import { CustomerInformationService } from '../../Services/cusrtomerInformation.service' 
import { App1Routing } from './app1.routing' 
import {App1Component} from './app1.component' 
import { App1HomeComponent } from './01-Home/app1.home.component'; 
import { App1EmploymentHistory } from './02-employment/app1.employment.component' 



@NgModule({ 
    imports: [BrowserModule, ReactiveFormsModule, App1Routing], 
    declarations: [App1Component, App1HomeComponent, App1EmploymentHistory], 
    providers: [CustomerInformationService], 
    exports:[RouterModule] 
}) 

export class App1Module{} 

H avant mon app1.routing

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import {App1Component} from './app1.component'; 
import { App1HomeComponent } from './01-Home/app1.home.component'; 
import { App1EmploymentHistory} from './02-employment/app1.employment.component'; 

const appRoutes: Routes = [ 
    { 
     path: 'app1', component: App1Component, children: 
     [ 
      {path: 'app1home', component:App1HomeComponent}, 
      { path: 'employment', component: App1EmploymentHistory } 
     ] 
    }, 
    {path:'', component:App1Component} 
]; 


export const App1Routing: ModuleWithProviders = 
    RouterModule.forChild(appRoutes); 

Mon problème commence par lui-même .. App1Component où je veux garder mes étapes de l'assistant toujours visible, puis charger les composants enfants un à un moment où quelqu'un clique sur suivant et précédent.

Voici mon modèle App1.component:

<div *ngIf="displayContents != null && displayContents == true"> 

    <ul class='nav nav-wizard'> 
     <li><a href='#step1' data-toggle="tab">1 - Personal Details</a></li> 
     <li><a href='#step2' data-toggle="tab">Step 2</a></li> 
     <li><a href="/fgdf">Step 3</a></li> 
     <li class="active"><a href="/fgdf">Step 4</a></li> 
     <li><a href="/fgdf">Step 5</a></li> 
     <li><a href="/fgdf">Step 6</a></li> 
     <li><a href="/fgdf">Step 7</a></li> 
    </ul> 
    <hr /> 
    <div id="myTabContent" class="tab-content"> 
     <div class="tab-pane fade" id="step1"> 
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> 
     </div> 
     <div class="tab-pane fade active in" id="step2"> 
      <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> 
     </div> 
    </div> 
</div> 

<router-outlet></router-outlet> 

Comme vous pouvez le voir, mon router_outlet est juste en dessous des étapes de l'assistant .. Maintenant, quand quelqu'un visite/app1, je veux charger automatiquement le composant dans App1Home une sortie de routeur et quand ils cliquent sur suivant, je veux supprimer le composant App1Home et charger le prochain composant qui est App1EmploymentHistory. Je veux aussi prendre une approche de chargement paresseux du composant App1EmploymentHistory seulement après un clic pour ne pas avoir à charger le composant pendant l'initialisation de l'application

J'ai essayé de mettre "selector" dans App1HomeComponent mais quand j'ai mis ce sélecteur dans mon App1Component , il charge App1HomeComponent mais il doesnh't supprimer ce composant lorsque je navigue sur le composant App1EmploymentHistory en utilisant le bouton suivant sur App1HomeComponent ..

Je suis sûr que je manque un concept quelque part que je suis très novice à angulaire 4.

Je vais apprécier si quelqu'un suggère une solution à ce problème.

S'il y a quelque chose de disponible qui imite les étapes de l'assistant et paresseux charger les étapes uniquement en cliquant sur le bouton suivant/précédent, je n'aurai certainement pas à inventer la roue. J'apprécierai toutes les suggestions toutes faites que je peux adapter à mon projet.

Answer 1

Votre navigation supérieure peut être modifiée à ceci:

<ul class='nav nav-wizard'> 
     <li routerLink="/app1home" routerLinkActive="active" data-toggle="tab"> 
      <span class="link-text-not-active">Step 1</span> 
      <span class="link-text-active">Step 1 - Personal Details</span> 
     </li> 
     <li routerLink="/step2" routerLinkActive="active" data-toggle="tab"> 
      <span class="link-text-not-active">Step 2</span> 
      <span class="link-text-active">Step 2 - some longer title</span> 
     </li> 
     ... 
    </ul> 

Ensuite, le code CSS pour la navigation:

.active .link-text-not-active { 
     display: none; 
    } 

.link-text-active { 
     display: none; 
    } 

.active .link-text-active { 
     display: block !important; 
    } 

Pour rediriger la charge, ajoutez à votre routeur:

{ path: '', redirectTo: '/app1home', pathMatch: 'full' }, 

Pour naviguer depuis votre contrôleur, ajoutez ceci à votre contrôleur:

import { Router } from '@angular/router'; 

... 

constructor(private router: Router) 

... 

//in method 
this.router.navigate('/app1home'); 

Answer 2

@Sam La réponse me semble juste.

Je vais juste ajouter un peu de code pour le bouton suivant et précédent:

<button [routerLink]="nextLink()"> next </button> 
<button [routerLink]="previousLink()"> previous </button> 

et dans vos component.ts:

stepLinks = ['/step1','/step2','/step3','/step4'] 

constructor(router:Router) { 
    router.events.subscribe((url: any) => this.url = url); 
} 

// I don't remember well what gives this.url so check it with a console.log before 

nextLink(){ 
    const index = this.stepLinks.indexOf(this.url); 
    if (index === this.stepLinks.length-1){ return `${this.stepLinks[index]}`} 
    return `${this.stepLinks[index + 1]}` 
} 

Vous devez adapter le code pour le previousLink()