代码之家 › 专栏 › 技术社区 › Thabo

角度特征布线模块-未加载子组件

angular2-routing angular javascript

0

Thabo · 技术社区 · 8 年前

我在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', {}]);

在 移动请求窗体组件 从服务器得到一些响应后,我得到

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

在我切换到Angular6之前,这个配置是工作的,是不是因为appmodule中的更改,我已经将这个功能模块作为导入排除在外了?

对于我所缺少的任何帮助都将不胜感激。因为我也尝试过使用第三个组件作为默认组件,并使用 router-outlet 在该路线上呈现子对象并拥有子对象属性以作为子对象

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

但这也不起作用,它停留在moverequestformcomponent上,当 'move-request-success' 被导航到了。或者我应该改变方法?

2 回复 | 直到 8 年前

1

2

Sachin Gupta 8 年前

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

2

J. S. 8 年前

this.router.navigate(['/move request success',{}]);。如果将a/添加到路由,这意味着您使用根的绝对路径。你试过没有/?

编辑:

我想我明白你的问题了。导航到包含多个组件的模块,这意味着在延迟加载后,将使用从加载的模块中加载的路由器配置。这意味着

移动请求/:id

是模块的根,每个子例程都需要在URL中包含模块根:

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

延迟加载模块中的URL是:

模块根(在您的案例中为move request/:id)+特定组件的配置路由(在您的案例中为move request success)