子路由

在Angular中，子路由是指在一个父路由下拥有自己独立的路由配置和组件的子路由。子路由通常用于实现页面的嵌套和层级关系，让页面的结构更加清晰和灵活。

要实现子路由，首先需要在父路由的模块文件中定义子路由的配置。在父路由模块的路由配置中，使用children属性来定义子路由的配置。子路由的配置与父路由的配置类似，只是路径是相对于父路由的路径的。

下面是一个简单的示例，演示如何在Angular中实现子路由：

1. 首先，在父路由的模块文件中定义子路由的配置。假设我们有一个父路由为/parent，子路由为/child，我们可以在父路由模块的路由配置中定义子路由的配置：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';

@NgModule({
  declarations: [ParentComponent, ChildComponent],
  imports: [
    RouterModule.forChild([
      { path: 'parent', component: ParentComponent, children: [
        { path: 'child', component: ChildComponent }
      ]}
    ])
  ]
})
export class ParentModule { }

2. 在父组件的模板文件中，使用router-outlet指令来显示子路由的组件：

<div>
  <h1>Parent Component</h1>
  <router-outlet></router-outlet>
</div>

3. 在子组件的模板文件中，定义子路由的内容：

<div>
  <h2>Child Component</h2>
</div>

4. 最后，在应用的根模块中引入父路由模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ParentModule } from './parent.module';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/parent', pathMatch: 'full' }
    ]),
    ParentModule
  ],
  bootstrap: [ParentComponent]
})
export class AppModule { }

这样就完成了子路由的配置和实现。当用户访问/parent路径时，会显示父组件的内容，并在父组件中显示子组件的内容。您可以根据需要设置更多的子路由，实现更加复杂的页面结构和导航功能。