Plusieurs points de connexion de routeur dans différents modèles Angular4

Question

Je me connecte en utilisant la balise router-outlet dans le fichier principal app.component.html et si la connexion est réussie je navigue vers la page d'accueil qui est un composant différent composé de barre d'outils, side-nav et une zone pour afficher mon tableau de bord content.Now dans ma page d'accueil i besoin d'un autre routeur de sortie où il affiche le contenu sur l'option de choisir côte à nav

ma structure du projet est:

src 

--login 
----login.component.html 
----login.component.ts 
----login.component.css 
--home-page 
    dashboard 
    --dashboard.component.html 
    --dashboard.component.ts 
----home.component.html 
----home.component.ts 
----home.component.css 
--application-details 
    app-overview 
    --app-overview.component.html 
    --app-overview.component.ts 
----application.component.html 
----application.component.ts 
--users 
----users.component.html 
----users.component.ts 

dans mon app.component.html a la suivant

<router-outlet></router-outlet>

Dans login.componnet.ts

sur le succès this.route.navigate(['/home-page'])

Dans mon app-routing.module.ts

{ path:'', redirectTo:'/login',pathMatch:'full'}, 
{ path: 'login', component: LoginComponent}, 
{ path:'/home-page',component:HomePgaeComponent, 
    children:[ 
     { path:'',component:DashboardComponent,outlet:'dashboard'}, 
     { path:'user',component:UsersComponent,outlet:'user'}, ] 
    }, 

maintenant dès que je me connecte en fonction de la condition de succès déclenche la page Accède au tableau de bord qui est à l'intérieur à la maison page comme celle-ci

<tool-bar></tool-bar>  
    <div> 
    <side-menu></side-menu> 
    <div class="main-content"> 

     <router-outlet name="dashboard"></router-outlet> 
     <router-outlet name="user"></router-outlet> 

    </div> 
    </div> 

ici quand je clique sur l'option utilisateur d'un côté nav, il ajoute le contenu tableau de bord ainsi que content.I « utilisateur » ont d'autres options, si bien que pour la première fois il charge la page d'atterrissage parfaitement mais quand je sélectionne d'autres options side-nav tout le contenu est mélangé. Donc quand je choisis les options de côté-nav que le contenu respectif devrait être chargé dans la zone de contenu de page d'accueil.un autre scénario est quand je navigue vers la page d'accueil je dois naviguer à une autre page lorsque j'effectue une action de clic dans le composant tableau de bord. J'ai suivi des tutoriels et là, ils passaient quelques identifiants à travers services et je n'ai aucune idée de comment faire cela. Selon mes connaissances, je sais que passage nom de sortie dans le routeur-sortie ira chercher le contenu de ce composant de même que de nombreux routeur je mentionne ces nombreux routeurs multiples seront être générés.

Answer 1

ici quand je clique sur l'option utilisateur d'un côté nav il ajoute contenu du tableau de bord ainsi que le contenu « utilisateur »

<router-outlet name="dashboard"></router-outlet> 
<router-outlet name="user"></router-outlet> 

Les deux sont des enfants de même composant

{ path:'/home-page',component:HomePgaeComponent, 
    children:[ 
     { path:'',component:DashboardComponent,outlet:'dashboard'}, 
     { path:'user',component:UsersComponent,outlet:'user'}, ] 
}, 

Soit vous utilisez la même sortie de routeur pour afficher à la fois le tableau de bord et l'utilisateur, soit vous avez une sortie de routeur utilisateur à l'intérieur du tableau de bord et l'utilisateur est le tableau de bord.