1. 简介
在Angular中，路由是一种非常重要的机制，用于导航到不同的页面或视图。嵌套路由是指在一个父路由下包含一个或多个子路由的情况。父子路由的嵌套可以帮助我们构建更加复杂和灵活的应用。
2. 创建父子路由
要创建一个父子路由结构，我们首先需要配置父路由和子路由。下面是一个简单的示例：
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } 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.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
2.1 父路由配置
在这个示例中，我们首先定义了一个父路由，路径为"/parent"，对应的组件为ParentComponent。
...
{ path: 'parent', component: ParentComponent, ... }
...
2.2 子路由配置
接下来，我们在父路由的配置中定义了子路由。子路由的路径为"/parent/child"，对应的组件为ChildComponent。
...
{ path: 'parent/child', component: ChildComponent }
...
3. 在模板中使用父子路由
在模板中，我们可以使用router-outlet指令来显示父子路由的内容。在父组件的模板中，我们可以添加一个占位符来渲染子路由的内容。
Parent Component
This is the parent component.
在子组件的模板中，我们可以直接添加内容。
Child Component
This is the child component.
4. 路由导航
要在父子路由之间导航，我们可以使用routerLink指令。在父组件的模板中，我们可以添加一个链接到子路由的导航按钮。
Parent Component
This is the parent component.
Go to Child
点击"Go to Child"链接后，页面将会导航到子路由。
5. 总结
通过使用父子路由，我们可以在Angular应用中实现更复杂和灵活的导航。通过配置父路由和子路由，以及在模板中使用router-outlet指令和routerLink指令，我们可以实现父子路由的嵌套。这样可以帮助我们组织应用的结构，并提供更好的用户体验。