在Angular 10中,可以通过使用命名出口来定义子路由。下面是一个示例代码:
首先,在父组件的路由配置中定义一个命名出口,例如:
const routes: Routes = [
{ path: 'parent', component: ParentComponent, children: [
{ path: 'child1', component: Child1Component, outlet: 'childOutlet' },
{ path: 'child2', component: Child2Component, outlet: 'childOutlet' }
]}
];
在上面的示例中,我们定义了一个名为childOutlet
的命名出口,并将子路由child1
和child2
分配给该出口。
然后,在父组件的模板中,使用router-outlet
指令来显示命名出口。例如:
上面的示例中,第一个router-outlet
用于显示父组件的内容,而第二个router-outlet
用于显示子路由的内容。
最后,在应用的根模块或父组件中,使用RouterModule.forRoot()
方法来配置路由。例如:
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
通过以上步骤,您就可以在Angular 10中使用命名出口来定义子路由了。