在Angular中,嵌套路由是一种将多个组件嵌套到父路由中的方式。这样可以在应用程序中创建更复杂的页面布局和导航结构。
以下是一个示例,演示如何在Angular中实现嵌套路由:
首先,创建一个父组件(例如ParentComponent
)和多个子组件(例如Child1Component
和Child2Component
)。
在父组件的HTML模板中,添加一个用于显示子组件的占位符。假设我们将使用
作为占位符。
父组件
在父组件的路由模块中(例如parent-routing.module.ts
),定义父路由和子路由。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
import { Child1Component } from './child1.component';
import { Child2Component } from './child2.component';
const routes: Routes = [
{
path: '',
component: ParentComponent,
children: [
{ path: '', redirectTo: 'child1', pathMatch: 'full' },
{ path: 'child1', component: Child1Component },
{ path: 'child2', component: Child2Component }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ParentRoutingModule { }
在根路由模块中(例如app-routing.module.ts
),导入父路由模块并将其添加到根路由配置中。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentRoutingModule } from './parent/parent-routing.module';
const routes: Routes = [
// 其他路由配置
{ path: 'parent', loadChildren: () => import('./parent/parent.module').then(m => m.ParentModule) },
// 其他路由配置
];
@NgModule({
imports: [RouterModule.forRoot(routes), ParentRoutingModule],
exports: [RouterModule]
})
export class AppRoutingModule { }
最后,在根组件的HTML模板中,添加一个链接到父组件的路由。
通过以上步骤,我们创建了一个简单的嵌套路由结构。当导航到/parent
时,将加载ParentComponent
,并在
中显示Child1Component
。同样,当导航到/parent/child2
时,将显示Child2Component
。
请注意,要使嵌套路由正常工作,需要在每个组件的模块中导入和声明相应的组件,并在父路由模块中导入和配置子路由。
下一篇:Angular中的嵌套路由出口