Wie zu den untergeordneten Komponenten in Angular2 zu routen?

Question

Ich versuche, die Basiseinrichtung für ein Projekt zu tun. Dies sind die Dateien, die ich erstellt:

app.component.html

<div class="jumbotron"> 
    <div class="container"> 
     <div class="col-sm-8 col-sm-offset-2"> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
</div> 

Im Folgenden finden Sie meine Routen in app.routes.ts Datei

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { 
     path: 'main', 
     component: MainComponent, 
     children: [ 
     { 
      path: 'main/dashboard',component: DashboardComponent 
     }, 
     { 
      path: 'main/user',component: UserComponent 
     }, 
     { 
      path: 'main/reports',component: ReportsComponent 
     } 
     ] 
    }, 

    { path: '**', redirectTo: 'main' } 
]; 

main.component. html

<div id="wrapper"> 
    <app-top-bar></app-top-bar> 
    <router-outlet></router-outlet> 
</div> 

topbar.component.html

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="navbar-header"> 
     <a class="navbar-brand">My Admin</a> 
    </div> 
    <ul class="nav navbar-right top-nav"> 
     <li> 
      <a [routerLink]="['/login']"><i class="fa fa-fw fa-user"></i> Logout</a> 
     </li> 
    </ul> 
    <app-side-bar></app-side-bar> 
</nav> 

sidebar.component.html

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav side-nav"> 
    <li [routerLink]="['main/dashboard']" routerLinkActive="active"> 
     <a><i class="fa fa-fw fa-dashboard"></i> Dashboard</a> 
    </li> 
    <li [routerLink]="['main/user']" routerLinkActive="active"> 
     <a ><i class="fa fa-fw fa-bar-chart-o"></i> Users</a> 
    </li> 
    <li [routerLink]="['main/reports']" routerLinkActive="active"> 
     <a><i class="fa fa-fw fa-table"></i> Reports</a> 
    </li> 
    </ul> 
</div>  

Ich bin in der Lage auf die Hauptkomponente zur Login-Seite und zu navigieren, die eine topbar enthält, eine Sidebar und einen Inhaltsabschnitt, in dem der Inhalt der Seitenleistenkomponenten wie Dashboard, Benutzer oder Berichte angezeigt wird.

Wenn ich jedoch versuche, auf die Sidebar-Komponenten (Dashboard, Benutzer oder Berichte) zu klicken, werden die Komponenten nicht im rechten Teil des Bildschirms angezeigt. Kann ich Hilfe bekommen?

Answer 1

Hallo Bitte entfernen Sie main/von Ihrem Kind Route Konfiguration:

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { 
     path: 'main', 
     component: MainComponent, 
     children: [ 
     { 
      path: 'dashboard',component: DashboardComponent 
     }, 
     { 
      path: 'user',component: UserComponent 
     }, 
     { 
      path: 'reports',component: ReportsComponent 
     } 
     ] 
    }, 

    { path: '**', redirectTo: 'main' } 
]; 

und Rest des Codes ist in Ordnung.

Answer 2

Wechsel:

children: [ 
     { 
      path: 'main/dashboard', component: DashboardComponent 
     }, 
     { 
      path: 'main/user', component: UserComponent 
     }, 
     { 
      path: 'main/reports', component: ReportsComponent 
     } 
     ] 

An:

children: [ 
     { 
      path: 'dashboard', component: DashboardComponent 
     }, 
     { 
      path: 'user', component: UserComponent 
     }, 
     { 
      path: 'reports', component: ReportsComponent 
     } 
     ] 

Ansonsten Ihre Routen wie /main/main/Armaturenbrett schauen müssen usw. zu treffen.