在Angular中,子路由默认会加载子组件。如果你希望子路由加载父组件而不是子组件,你可以使用componentless routes
(无组件路由)的方法。
首先,在父组件的路由配置中,将子路由的路径设置为空字符串(''
):
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{
path: '',
component: ChildComponent
}
]
}
];
接下来,在父组件的模板中,使用
来显示子路由的内容:
然后,创建一个空的子组件,用于占位,这样子路由就会加载父组件而不是子组件:
@Component({
template: ''
})
export class ChildComponent {}
最后,在父组件中,你可以在需要的地方使用
来显示子路由的内容:
@Component({
template: `
Parent Component
`
})
export class ParentComponent {}
现在,当你导航到父组件的路由时,子路由将会加载父组件而不是子组件。