子路由

在Angular应用中，路由是一个非常重要的概念，它允许我们根据URL的不同部分来导航到不同的视图。子路由（Child Routes）是路由系统中的一个高级特性，它允许我们在一个父路由下定义多个子路由，从而实现更复杂的导航结构。

1. 什么是子路由？

子路由是指在一个父路由下定义的子路径。通过子路由，我们可以将一个复杂的页面拆分成多个子页面，每个子页面有自己的路由配置。这样不仅使代码结构更加清晰，还能提高应用的可维护性。

1.1 为什么使用子路由？

模块化：子路由允许我们将复杂的页面拆分成多个模块，每个模块有自己的路由配置。
嵌套视图：子路由可以嵌套在父路由中，实现复杂的导航结构。
动态加载：子路由可以与惰性加载结合使用，提高应用的性能。

2. 如何配置子路由？

在Angular中，配置子路由非常简单。我们只需要在父路由的配置中添加children属性，并在其中定义子路由。

2.1 创建父组件和子组件

首先，我们需要创建一个父组件和一个或多个子组件。假设我们有一个ParentComponent和一个ChildComponent。

ng generate component Parent
ng generate component Child

2.2 配置父路由

接下来，我们在父路由的配置中添加children属性，并在其中定义子路由。

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './child/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.3 在父组件中添加`<router-outlet>`

为了显示子路由的内容，我们需要在父组件的模板中添加<router-outlet>标签。

<!-- parent.component.html -->
<h1>Parent Component</h1>
<router-outlet></router-outlet>

2.4 导航到子路由

现在，我们可以通过导航到/parent/child来访问子路由。

<!-- app.component.html -->
<a routerLink="/parent">Parent</a>
<a routerLink="/parent/child">Child</a>
<router-outlet></router-outlet>

3. 实践练习

3.1 创建多个子组件

为了更好地理解子路由，我们可以创建多个子组件，并在父路由中配置它们。

ng generate component Child1
ng generate component Child2

3.2 配置多个子路由

在父路由的配置中添加多个子路由。

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child1',
        component: Child1Component
      },
      {
        path: 'child2',
        component: Child2Component
      }
    ]
  }
];

3.3 导航到不同的子路由

在父组件的模板中添加导航链接，以便用户可以切换不同的子组件。

<!-- parent.component.html -->
<h1>Parent Component</h1>
<a routerLink="child1">Child 1</a>
<a routerLink="child2">Child 2</a>
<router-outlet></router-outlet>

4. 总结

子路由是Angular路由系统中的一个强大特性，它允许我们将复杂的页面拆分成多个子页面，并通过嵌套的方式进行导航。通过合理使用子路由，我们可以使应用的结构更加清晰，提高代码的可维护性。

4.1 关键点回顾

子路由：在一个父路由下定义的子路径。
配置：在父路由的配置中使用children属性定义子路由。
嵌套视图：在父组件的模板中使用<router-outlet>标签显示子路由的内容。

4.2 下一步

在掌握了子路由的基本概念和配置方法后，你可以进一步探索Angular的其他高级路由特性，如路由守卫、惰性加载等，以构建更加复杂和高效的Angular应用。

通过本教程，你应该已经掌握了如何在Angular中配置和使用子路由。希望你能将这些知识应用到实际项目中，构建出更加模块化和可维护的应用。

← Previous: 掌握React中的路由参数 Next: 深入理解Angular中的路由守卫 →

子路由