错误：无法匹配任何路线

我添加了一条命名的第二条路线，但是当我尝试导航到某个页面时，似乎出现了错误。错误：无法匹配任何路线

下面是我的路线是这样的：

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

错误：无法匹配任何路线

回答

相关问题