2016-08-14 133 views
2

對於應用程序,我想建立,是在抹紅路徑應該如何:Angular2路由使用(2.0.0-rc.5)路由

enter image description here

是從應用程序.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所執行的操作,我在瀏覽器中收到以下消息:

enter image description here

任何人都可以請讓我知道了什麼是這裏的問題。我正在使用angular2版本:(2.0.0-rc.5)

回答

2

如果你想summarydetail是的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 
    } 
]; 
2

您似乎拼錯了「Component」作爲「Comonent」。這可能是你問題的根源。

這似乎在這裏:

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

這裏:

UsageInformationComonent, 
DetailedInformationComonent, 
+0

但是在那裏我另一個問題。 – KTB

+0

但還有另一個問題。 當登錄成功時,重定向到/儀表板不成功。例如,出於測試目的,我試圖在點擊登錄後重定向到儀表板頁面: performSignIn (){這個_路由器。導航([ '/儀表板']); } 應用路由: { \t道: '登入', \t組件:SignInComponent },{ \t道: '儀表盤', \t組件:DashboardComponent }, 但我是出現錯誤:{「message」:「未找到」,「錯誤」:{「status」:404}} – KTB

+0

您可以發佈完整的錯誤日誌以瞭解確切的測試用例嗎?這會幫助我更好地指出問題。另外,你是否將所有這些組件導入到路由配置文件中? – Kevin