在Angular 14中,嵌套路由可以通过在父级路由配置中使用children
属性来实现。以下是一个示例解决方法:
首先,在父级组件的路由配置中定义嵌套路由:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{
path: 'child',
component: ChildComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ParentRoutingModule { }
在上面的示例中,父级组件的路由路径为parent
,并且有一个子级路由路径为child
。父级组件和子级组件的组件类分别为ParentComponent
和ChildComponent
。
然后,在父级组件的模板中定义子级路由的占位符:
Parent Component
在上面的示例中,
标签用于显示子级路由的组件。
最后,在子级组件的模板中定义子级路由的内容:
Child Component
这样,当访问/parent/child
路径时,将会显示父级组件和子级组件。