각도 2 최종 라우팅

내 프로젝트에서 최신 앵귤러 2 라우팅을 사용해 보았지만 정상적으로 작동하지 않는 것 같습니다 (항상 path: '', redirectTo: 'dashboard', pathMatch: 'full'이됩니다). 이유는 모르겠습니다. 어쩌면 누군가가 더 경험이 있습니까?각도 2 최종 라우팅

이 내 routing.module.ts : 또한 모든 구성 요소의 수입과 import {Routes, RouterModule} from '@angular/router';

을 포함

export const appRoutes: Routes = [{ 
    path: 'dashboard', 
    component: DashboardComponent, 
    children: [ 
    { 
     path: ':status', 
     component: StatusComponent 
    }, 
    { 
     path: ':history', 
     component: HistoryComponent 
    }, 
    { 
     path: ':documentation', 
     component: DocumentationComponent 
    }] 
}, 
    { 
    path: '**', 
    component: PageNotFoundComponent 
    }, 
    { 
    path: '', 
    redirectTo: 'dashboard', 
    pathMatch: 'full' 
    } 
]; 
export const routing = RouterModule.forRoot(appRoutes);

이 내 app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import {routing} from './routing.module'; 

@NgModule({ 
    declarations: [ 
    ...,], 
     imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     routing 
     ], 
     directives: ROUTER_DIRECTIVES, 
     providers: [], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { }

마지막으로 HTML입니다 - app.component.html

<div class="row"> 
    <div class="col-xs-3"> 
    <app-sidebar></app-sidebar> 
    </div> 
    <div class="col-xs-9"> 
    <app-navbar></app-navbar> 
    <router-outlet></router-outlet> 
    </div> 
</div>

0 사이드 바

<a [routerLink]="['dashboard/status']">Link</a>

사이드 메뉴 바에서

일례 링크가 도시된다. 또한 링크가 옳은 것 같습니다 (마우스를 올리면 localhost : 4200/dashboard/...). 그러나 클릭 만 대시 보드로 리디렉션됩니다.

출처

2016-09-27 edamerau

콜론 (:) 상태 경로 – Yong

의 제거는 제거''콘솔이 오류가 발생하지만'오류 : '다음 StatusComponent'' – edamerau

가져 오기를 {로드 주 출구를 찾을 수 없습니다 StatusComponent}를 './status.component'에서 삭제하고 app.module.ts의 선언에 추가합니다. – Yong

plnkr

const appRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo: '/dashboard', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'dashboard', 
    children: [ 
    { 
     path: '', 
     component: DashboardComponent 
    }, 
    { 
     path: 'status', 
     component: StatusComponent 
    }] 
    } 
];

출처

2016-09-27 13:35:32 Yong

각도 2 최종 라우팅

답변

관련 문제