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

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 属性作为子组件

 {
   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:'' 匹配默认路由，然后它会查找并这条路线的 children 。您应该将 pathMatch:'full' 添加到第一个路由，这是本例中的默认路由。由于提到的路由与第一条路由匹配，并且无法找到并匹配任何子路由，因此显示错误。