對於應用程序,我想建立,是在抹紅路徑應該如何:Angular2路由使用(2.0.0-rc.5)路由
是從應用程序.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)
但是在那裏我另一個問題。 – KTB
但還有另一個問題。 當登錄成功時,重定向到/儀表板不成功。例如,出於測試目的,我試圖在點擊登錄後重定向到儀表板頁面: performSignIn (){這個_路由器。導航([ '/儀表板']); } 應用路由: { \t道: '登入', \t組件:SignInComponent },{ \t道: '儀表盤', \t組件:DashboardComponent }, 但我是出現錯誤:{「message」:「未找到」,「錯誤」:{「status」:404}} – KTB
您可以發佈完整的錯誤日誌以瞭解確切的測試用例嗎?這會幫助我更好地指出問題。另外,你是否將所有這些組件導入到路由配置文件中? – Kevin