问题描述:
使用Angular 14,路由到子路由时可能会遇到一些问题。具体而言,当从父路由导航到子路由时,子组件可能无法加载或父组件可能保持显示。
原因:
这通常是由于路由配置错误导致的。在Angular 14中,子路由必须在父路由下方,并且必须有一个匹配的出口才能显示子组件。
以下是正确配置路由以使子路由工作的示例:
在父组件的HTML中添加:
Go to child route
在父组件的ROUTE配置中添加:
{
path: 'parent',
component: ParentComponent,
children: [
{ path: 'child', component: ChildComponent }
]
}
在子组件的HTML中添加:
Child component works!
这将确保当从父组件的URL“parent”导航到子组件的URL“parent/child”时,子组件将正确加载并显示。