錯誤：無法匹配任何路線

我添加了一條命名的第二條路線，但是當我嘗試導航到某個頁面時，似乎出現了錯誤。錯誤：無法匹配任何路線

下面是我的路線是這樣的：

const appRoutes: Routes = [ 
    { path: '', redirectTo: '/projects', pathMatch: 'full' }, 
    { path: 'projects', component: ProjectsComponent }, 
    { path: 'projects/:projectId', component: ProjectDetailsComponent }, 
    { path: 'projects/:projectId/routes', component: RoutesComponent, outlet: 'project' }, 
    { path: 'projects/:projectId/rides/new', component: AddRideComponent, outlet: 'project' }, 
    { path: 'projects/:projectId/routes/:id', component: RideDetailsComponent, outlet: 'project' }, 
    { path: 'projects/:projectId/stops', component: StopsComponent, outlet: 'project' }, 
    { path: 'projects/:projectId/stops/new', component: AddStopComponent, outlet: 'project' }, 
    { path: 'projects/:projectId/stops/:id', component: StopDetailsComponent, outlet: 'project' }, 
    { path: 'drivers', component: DriversComponent }, 
    { path: 'drivers/new', component: AddDriverComponent }, 
    { path: 'drivers/:id', component: DriverDetailsComponent }, 
    { path: 'settings', component: SettingsComponent } 
];

這是我的一個名爲router-outlet是什麼樣子：

<router-outlet name="project"></router-outlet>

這是我routerLink是什麼樣子：

<a [routerLink]="[{ outlets: { project: ['projects', projectId, 'routes'] } }]">Routes</a>

當我將鼠標懸停在鏈接上，顯示url爲http://localhost:4200/projects/99979de9-264c-278f-d7b4-6dec9a830974/(project:projects/99979de9-264c-278f-d7b4-6dec9a830974/routes)

當我點擊鏈接我得到以下錯誤的：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'projects/99979de9-264c-278f-d7b4-6dec9a830974' 
Error: Cannot match any routes. URL Segment: 'projects/99979de9-264c-278f-d7b4-6dec9a830974' 
    at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (router.es5.js:1342) 
    at CatchSubscriber.selector (router.es5.js:1317) 
    at CatchSubscriber.webpackJsonp.../../../../rxjs/operator/catch.js.CatchSubscriber.error (catch.js:104) 
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (Subscriber.js:128) 
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (Subscriber.js:102) 
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (Subscriber.js:128)

我在做什麼錯？

來源

2017-06-29 narzero

你有沒有發現這個解決方案？ –

@PraveenRawat，看看 – narzero

下面的答案，我在嘗試像你這樣的東西，但沒有任何兒童路線。 [鏈接]（https://stackoverflow.com/questions/46156139/angular-2-4-routing- with-named-outlet）。你能看看這個，告訴我這裏可能有什麼問題嗎？ –

看來我還沒有提到兒童組件的組件。做這樣的解決了這個問題：

export const appRoutes: Routes = [ 
    { path: '', redirectTo: 'projects', pathMatch: 'full' }, 
    { path: 'projects', component: ProjectsComponent }, 
    { path: 'projects/:projectId', component: ProjectDetailsComponent, 
    children: [ 
     { path: 'routes', component: RoutesComponent, outlet: 'project' }, 
     { path: 'rides/new', component: AddRideComponent, outlet: 'project' }, 
     { path: 'routes/:id', component: RideDetailsComponent, outlet: 'project' }, 
     { path: 'stops', component: StopsComponent, outlet: 'project' }, 
     { path: 'stops/new', component: AddStopComponent, outlet: 'project' }, 
     { path: 'stops/:id', component: StopDetailsComponent, outlet: 'project' } 
    ] 
    } 
];

和路由器，電源插座應安裝在ProjectDetailsComponent

<router-outlet name="project"></router-outlet>

來源

2017-09-11 13:11:36 narzero

錯誤：無法匹配任何路線

回答

相關問題