Angular 功能路由模块 - Child 组件未加载

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

当 move-request/:id 被路由到时，我想导航到 MoveRequestFormComponent 作为默认组件，这工作正常，但是当我调用

this.router.navigate(['/move-request-success', {}]);

在 MoveRequestFormComponent 服务器响应后，我得到

zone.js:665 Unhandled Promise rejection: Cannot match any routes. URL Segment: 'move-request-success' ; Zone: <root> ;

这个配置在我切换到 Angular 6 之前是有效的，是否是因为 AppModule 的变化，我在其中排除了这个功能模块作为导入？

对于我遗漏的任何帮助，将不胜感激。因为我也尝试过使用第三个组件，它将成为默认组件并使用 router-outlet 来呈现 children 并在这条路线上有一个 children 属性作为 children

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

但这也没有用，它停留在 MoveRequestFormComponent 上，当 'move-request-success' 被导航时 to.Or 也许我应该改变方法？

Answer 1

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

Answer 2

this.router.navigate(['/移动请求成功', {}]);.如果您将 / 添加到路由，这意味着您使用从根目录开始的绝对路径。你试过没有 / 吗？

编辑：

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

move-request/:id

是你的模块的根，每个子路径都需要在 url:

中包含模块根

你的路线应该是 move-request/:id/move-request-success

延迟加载模块中的 URL 是：

模块根目录（在你的例子中是 move-request/:id）+ 特定组件的配置路由（在你的例子中是 move-request-success）

Angular 功能路由模块 - Child 组件未加载

Angular feature routing module - Child component not loaded

javascript

angular2-routing

angular