Angular2-Routing (2.0.0-rc.5) Routing

Question

Für die App ich versuche, hier zu bauen ist, wie die Rouging Pfade sein sollte:

, die von der App Component ist meine Bootstrap-Klasse und enthält Links zum Anmelden und Registrieren von Seiten. Obwohl sich das Dashboard auf derselben Ebene befinden sollte, sollte es nur sichtbar sein, wenn der Benutzer angemeldet ist. Und in der Dashboard-Komponente gibt es zwei untergeordnete Komponenten, Übersichts- und Detailpanels.

hier ist meine Routing-Konfigurationen:

import { Routes, RouterModule } from '@angular/router'; 
import {SignInComponent} from "./auth/signin.component"; 
import {SignUpComponent} from "./auth/signup.component"; 
import {DashboardComponent} from "./dashboard/dashboard.component"; 
import {PageNotFoundComponent} from "./error/page-not-found.component"; 
import {UsageInformationComponent} from "./dashboard/usage-information.component"; 
import {DetailedInformationComponent} from "./dashboard/detailed-info.component"; 

const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: '/signin', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'signin', 
     component: SignInComponent 
    }, 
    { 
     path: 'signup', 
     component: SignUpComponent, 
    }, 
    { 
     path: 'dashboard', 
     component: DashboardComponent 
    }, 
    { 
     path: 'summary', 
     component: UsageInformationComponent 
    }, 
    { 
     path: 'detail', 
     component: DetailedInformationComponent 
    }, 
    { 
     path: '**', 
     component: PageNotFoundComponent 
    } 
]; 

export const routing = RouterModule.forRoot(appRoutes); 

hier ist die app.module Klasse:

@NgModule(<NgModuleMetadataType>{ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     routing 
    ], 
    declarations: [ 
     AppComponent, 
     SignInComponent, 
     SignUpComponent, 
     DashboardComponent 
     UsageInformationComponent, 
     DetailedInformationComponent, 
     PageNotFoundComponent 
    ], 
    providers: [ 
     HeroService, 
     AuthService, 
     appRoutingProviders 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

aber wenn ich versuchte, die Zusammenfassung Komponente zuzugreifen, immer wird der entsprechende Pfad nicht, daher PageNotFoundComponent gefunden wird gefeuert. hier ist der Code in Dashboardseite:

<div class="container-fluid"> 
    <header class="row spacing"> 
     <nav class="navbar navbar-default navbar-static-top"> 
      <div class="container"> 
       <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a routerLink="/summary" routerLinkActive="active">Summary</a></li> 
         <li><a routerLink="/detail" routerLinkActive="active">Summary</a>Detail</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    </header> 
</div> 
<fr-dashboard *ngIf="hasLogin()"></fr-dashboard> 
<router-outlet></router-outlet> 

die Routen zu testen, habe ich versucht, folgendes zu tun: Wenn die signin Schaltfläche geklickt wird, sollte Seite Armaturenbrett

signin Taste umgeleitet werden:

<button class="btn btn-primary" (click)="performSignIn()">Sign In</button> 

Navigation:

performSignIn(){ 
     this._router.navigate(['/dashboard']); 
    } 

Aber wenn cli ck Aktion ausgeführt, erhalte ich die folgende Meldung im Browser:

kann mir jemand bitte lassen Sie wissen, was das Problem ist hier. Ich benutze angular2 Version: (2.0.0-rc.5)

Answer 1

Wenn Sie summary und detail sein wollen Kind Routen von dashboard müssen Sie es wie ein Kinder Routen definieren:

const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: '/signin', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'signin', 
     component: SignInComponent 
    }, 
    { 
     path: 'signup', 
     component: SignUpComponent, 
    }, 
    { 
     path: 'dashboard', 
     component: DashboardComponent, 
     children: [ 
      path: '', 
      redirectTo: 'summary', 
      pathMatch: 'full' 
     }, 
     { 
      path: 'summary', 
      component: UsageInformationComponent 
     }, 
     { 
      path: 'detail', 
      component: DetailedInformationComponent 
     }, 
     ] 
    }, 
    { 
     path: '**', 
     component: PageNotFoundComponent 
    } 
]; 

Answer 2

Sie scheinen "Component" als "Component" falsch geschrieben zu haben. Dies könnte die Ursache Ihres Problems sein.

Dies scheint hier:

{ 
    path: 'summary', 
    component: UsageInformationComonent 
}, 
{ 
    path: 'detail', 
    component: DetailedInformationComonent 
}, 

und hier:

UsageInformationComonent, 
DetailedInformationComonent,