gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:33:21 25 4
gpt4 key购买 nike

我有一个在 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 上。或者也许我应该更改方法?

最佳答案

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

关于javascript - Angular 功能路由模块 - 子组件未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50683518/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com