Angular2路由使用（2.0.0-rc.5）路由

Question

对于应用程序，我想建立，是在抹红路径应该如何：

是从应用程序.component是我的引导类，它拥有登录和注册页面的链接。尽管仪表板应该处于同一级别，但只有在用户注册后才能看到。在仪表板组件中，有两个子组件，摘要和详细面板。

这里是我的路由配置：

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); 

这里的app.module类：

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

但每当我试图访问的摘要部分，始终相应的路径没有找到，因此PageNotFoundComponent被解雇。 这里是在仪表盘页面的代码：

<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> 

要测试的路线，我试图做到以下几点：当点击登入按钮时，页面应该被重定向到仪表板

登入按钮：

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

导航：

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

但当CLI CK所执行的操作，我在浏览器中收到以下消息：

任何人都可以请让我知道了什么是这里的问题。我正在使用angular2版本：（2.0.0-rc.5）

Answer 1

如果你想summary和detail是的dashboard子路由，你需要定义它像小孩路线：

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

您似乎拼错了“Component”作为“Comonent”。这可能是你问题的根源。

这似乎在这里：

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

这里：

UsageInformationComonent, 
DetailedInformationComonent,