如何通过上下页按钮修改Angular路由参数id与name并添加ID限制

问题概述 #

1. 点击「上一个学生」/「下一个学生」按钮时，路由和组件中的name参数未更新，仅id正常变化
2. 缺少ID范围校验，可能导航到学生数组外的无效ID

解决方案 #

1. 准备学生数据源 #

首先在组件中定义学生数据数组（或从服务中获取）：

// 组件内定义学生数据，根据实际业务调整
private students = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 4, name: '赵六' },
  { id: 5, name: '孙七' }
];

2. 修复name参数不更新问题 #

修改切换学生的方法，根据新ID从数组中获取对应学生的name，而非复用当前name：

previousStudent() {
  const currentId = parseInt(this.stdID);
  const previousID = currentId - 1;
  // 根据新ID匹配对应学生
  const targetStudent = this.students.find(student => student.id === previousID);
  if (targetStudent) {
    this.router.navigate(['/students', previousID, targetStudent.name]);
  }
}

nextStudent() {
  const currentId = parseInt(this.stdID);
  const nextID = currentId + 1;
  // 根据新ID匹配对应学生
  const targetStudent = this.students.find(student => student.id === nextID);
  if (targetStudent) {
    this.router.navigate(['/students', nextID, targetStudent.name]);
  }
}

3. 添加ID范围限制 #

在计算新ID后，先校验是否在学生数组的有效ID范围内（1-5），超出则不执行导航：

previousStudent() {
  const currentId = parseInt(this.stdID);
  const previousID = currentId - 1;
  // 校验ID是否在有效区间内
  if (previousID >= 1 && previousID <= 5) {
    const targetStudent = this.students.find(student => student.id === previousID);
    if (targetStudent) {
      this.router.navigate(['/students', previousID, targetStudent.name]);
    }
  }
}

nextStudent() {
  const currentId = parseInt(this.stdID);
  const nextID = currentId + 1;
  // 校验ID是否在有效区间内
  if (nextID >= 1 && nextID <= 5) {
    const targetStudent = this.students.find(student => student.id === nextID);
    if (targetStudent) {
      this.router.navigate(['/students', nextID, targetStudent.name]);
    }
  }
}

4. 优化参数订阅（可选） #

确保路由参数订阅的类型安全，避免潜在问题：

ngOnInit() {
  this.route.params.subscribe(data => {
    this.stdID = data['id'];
    this.stdNAME = data['name'];
    console.log('当前学生ID:', this.stdID);
  });
}

内容的提问来源于stack exchange，提问作者Muhammad Anas