Question

我添加了一条命名的第二条路线，但当我尝试导航到某个页面时似乎出现了问题。

以下是我的路线：

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>

当我将鼠标悬停在链接上时，会显示该网址为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)

我做错了什么？

Answer 1

好像我没有提到儿童组件的组件。这样做就解决了它：

c(3, 2, 1)
c(2, 3, 1)
c(3, 1, 2)
c(3, 2, 1)
c(1, 3, 2)
c(2, 1, 3)

并且您的路由器插座应该在ProjectDetailsComponent

中

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' }
    ]
  }
];

错误：无法匹配任何路由

1 个答案: