Angular 2中如何为父组件定义参数？附嵌套路由场景

我来帮你搞定这个问题！要给作为SchoolComponent子组件的ClassComponent定义路由参数，其实只需要两步：修改路由配置，然后在ClassComponent中获取并使用这个参数。咱们一步步来：

1. 修改路由配置，添加参数占位符 #

首先，你需要在指向ClassComponent的路由规则中添加参数占位符（比如:classId，名字可以根据业务自定义）。因为ClassComponent是SchoolComponent的子组件，它的路由会嵌套在SchoolComponent的children数组里。调整后的完整路由配置示例如下：

const routes: Routes = [
  // 假设SchoolComponent的父路由是根路径下的'school'，可根据你的实际配置调整
  { 
    path: 'school', 
    component: SchoolComponent,
    children: [
      { 
        path: 'class/:classId', // 这里添加`:classId`作为参数占位符
        component: ClassComponent, 
        children: [
          { path: 'students', component: StudentsComponent },
          { path: 'stats', component: StatsComponent }
        ] 
      }
    ]
  }
];

配置完成后，浏览器访问domain.com/school/class/101/students时，101就会被当作classId参数传递给ClassComponent。

2. 在ClassComponent中获取路由参数 #

接下来，你需要通过ActivatedRoute在ClassComponent里获取这个参数，有两种常用方式：

方式一：使用快照获取（适合参数不会动态变化的场景） #

如果用户不会在同一个ClassComponent页面切换不同的班级ID，直接用快照获取参数就足够了：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-class',
  templateUrl: './class.component.html',
  styleUrls: ['./class.component.css']
})
export class ClassComponent implements OnInit {
  classId: string | null = null;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 从路由快照中提取参数
    this.classId = this.route.snapshot.paramMap.get('classId');
    console.log('当前班级ID:', this.classId);
  }
}

方式二：订阅paramMap（适合参数可能动态变化的场景） #

如果用户可能在ClassComponent页面内切换不同班级（比如通过导航链接修改classId），那你需要订阅paramMap的变化，确保参数更新时组件能及时响应：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-class',
  templateUrl: './class.component.html',
  styleUrls: ['./class.component.css']
})
export class ClassComponent implements OnInit, OnDestroy {
  classId: string | null = null;
  private paramSubscription?: Subscription;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 订阅参数变化事件
    this.paramSubscription = this.route.paramMap.subscribe((params: ParamMap) => {
      this.classId = params.get('classId');
      console.log('更新后的班级ID:', this.classId);
      // 这里可以添加参数变化后的业务逻辑，比如重新加载班级数据
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.paramSubscription?.unsubscribe();
  }
}

3. 在模板中使用参数 #

拿到参数后，你可以直接在ClassComponent的模板里使用它，比如：

<h2>班级 {{ classId }} 详情</h2>
<nav>
  <a routerLink="students">查看学生列表</a> | <a routerLink="stats">查看班级统计</a>
</nav>
<router-outlet></router-outlet>

这样就完成了给ClassComponent添加路由参数的配置，现在访问domain.com/school/class/101/stats时，ClassComponent就能拿到101这个班级ID，子组件StudentsComponent和StatsComponent也能正常渲染啦！

内容的提问来源于stack exchange，提问作者Mohammad Honari