角度功能路由模块 - 未加载子组件

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 来呈现子级，并在此路由上有一个子级属性作为子级

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

但这也不起作用，当导航到 'move-request-success' 时，它停留在 MoveRequestFormComponent 上。或者也许我应该改变方法？

Answer 1

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

Answer 2

this.router.navigate(['/move-request-success', {}]);。如果将 / 添加到路由，则意味着您使用来自根目录的绝对路径。你试过没有 / 吗？

编辑：

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

移动请求/:id

是你模块的根目录，每个子路由都需要在 url 中包含模块根目录：

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

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

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