Question

我有一个我在AppModule中加载的功能模块，AppRoutingModule看起来像

const appRoutes: Routes = [
  ...
  {
    path: 'move-request/:id',
    loadChildren: 'app/modules/move_requests/move_requests.module#MoveRequestModule'
  },
  ...
];

功能模块的路由配置如下所示

const moveRequestRoutes: Routes = [

  {
    path: '',
    component: MoveRequestFormComponent,
    data: {title: 'Move Request'}
  },
  {
    path: 'move-request-success',
    component: RequestSuccessComponent,
    data: {title: 'Move request success'}
  },
];

我希望在MoveRequestFormComponent路由到move-request/:id时导航到this.router.navigate(['/move-request-success', {}]);作为默认组件，这样可以正常工作，但是当我打电话时

MoveRequestFormComponent

在服务器的一些响应之后的zone.js:665 Unhandled Promise rejection: Cannot match any routes. URL Segment: 'move-request-success' ; Zone: <root> ;中，我得到了

router-outlet

在我切换到Angular 6之前，此配置正常工作，是否因为AppModule中的更改，我将此功能模块排除在导入之外？

对我所缺少的任何帮助将不胜感激。因为我还尝试使用第三个组件作为默认组件，并使用{ path: '', component: MoveRequestFormComponent, data: {title: 'Move Request'} }, { path: 'move-request-success', component: RequestSuccessComponent, data: {title: 'Move request success'} },呈现子项并在此路由上拥有子属性以作为子项

'move-request-success'

但是这也没有用，当导航到#pragma omp critical时它停留在MoveRequestFormComponent上。或许我应该改变方法？

Answer 1

您不必在AppModule中导入功能模块，因为它是延迟加载的。导航到move-request/:id/move-request-success时，路径与path:''的默认路由匹配，然后它将查找该路由的子项。您应该将pathMatch:'full'添加到第一个路由，这是本例中的默认路由。由于提到的路线与第一条路线匹配，无法找到并匹配任何子路线，因此显示错误。

Answer 2

this.router.navigate（[＆＃39; / move-request-success＆＃39;，{}]）;。如果向路径添加/，则表示您使用root的绝对路径。你有没有试过/？

编辑：

我想我看到了你的问题。您导航到具有多个组件的模块，这意味着在延迟加载后，将使用已加载模块中的路由器配置。这意味着

移动请求/：ID

模块的根目录和每个子路由是否需要在url中包含模块root：

您的路线应为move-request/:id/move-request-success

延迟加载模块中的网址是：

模块根目录（在您的情况下为move-request /：id）+特定组件的已配置路由（在您的情况下为move-request-success）

角度特征路由模块 - 未加载子组件

2 个答案: