Angular中向Card组件传递数据失败并触发404错误求助

核心问题拆解 #

1. 路由跳转时路径出现/undefined，导致后端接口返回404错误
2. Card组件通过@Input接收数据的方式不适用于路由跳转场景
3. Student组件中冗余的路由参数获取逻辑，会触发无效的接口请求

修复步骤 #

1. 确保Student类的getId()返回有效ID #

检查你的Student模型类，保证getId()方法正确返回学生的唯一标识，避免返回undefined：

export class Student {
  private id: string;
  // 其他属性...

  getId(): string {
    return this.id; // 确认此处返回实际存在的ID值
  }
}

2. 清理Student组件的冗余代码 #

Student组件是列表页，无需从URL获取ID，删除ngOnInit中无效的接口调用：

ngOnInit(): void {
  this.getAllStudents();
  // 删除以下两行冗余代码
  // const id = this.route.snapshot.paramMap.get('id') || '';
  // this.studentService.getStudentById(id).subscribe(student => this.student = student);
}

3. 修改Card组件通过路由参数获取数据 #

路由跳转场景下，@Input无法传递数据，需通过ActivatedRoute获取参数并调用服务：

import { Component, OnInit } from '@angular/core';
import { Student } from 'src/app/models/Student';
import { ActivatedRoute } from '@angular/router';
import { StudentService } from 'src/app/services/student.service'; // 导入你的学生服务

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
  student: Student | undefined;

  constructor(private route: ActivatedRoute, private studentService: StudentService) { }

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.studentService.getStudentById(id).subscribe(student => {
        this.student = student;
      });
    }
  }
}

4. 修复Card组件中的无效链接 #

原代码中href="{{ student?.getCin() }}"使用学生CIN作为链接地址，大概率无效，改为合理逻辑：

<!-- 示例：路由到学生详情页 -->
<a [routerLink]="['/profile', student?.getCin()]" class="btn btn-primary">View Profile</a>
<!-- 或仅保留按钮交互 -->
<button class="btn btn-primary" (click)="handleProfileView(student)">View Profile</button>

5. 优化路由配置 #

删除无需的空路径路由，确保只有带ID的Card路由生效：

const routes: Routes = [
  { path: 'student', component: StudentComponent },
  { path: 'card/:id', component: CardComponent },
  { path: '', redirectTo: '/student', pathMatch: 'full' }, // 可选：添加默认路由跳转
];

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