Angular如何点击列表项获取单条数据并跳转至详情组件

你现在功能跑不通有两个核心缺失：一是列表页模板绑定的goToDetails()跳转方法没实现，点按钮不会触发路由跳转；二是详情页初始化逻辑为空，进入页面后不会读取路由参数、也不会调用接口拉取对应员工的详情数据，按下面步骤修改即可：

1. 补全列表页跳转方法 #

打开employee-home.component.ts，在EmployeeHomeComponent类中添加模板绑定的跳转方法：

// 记得在构造函数中注入ActivatedRoute（如果用相对路径跳转的话）
goToDetails(employeeId: string): void {
  // 跳转到已配置的详情路由，传入当前点击条目的员工id
  this.router.navigate(['detail', employeeId], { relativeTo: this.route });
}

注意：如果要写绝对路径，根据你的模块路由挂载位置调整即可，保证最终跳转路径匹配路由表中detail/:id的规则就行。

2. 补全详情页数据拉取逻辑 #

打开employee-detail.component.ts，替换空的ngOnInit方法，实现路由参数读取和详情接口调用：

// 记得在文件顶部导入需要的rxjs操作符和EmployeeHelper
import { switchMap } from 'rxjs/operators';
// 导入EmployeeHelper的路径和service中保持一致即可

ngOnInit(): void {
  // 读取路由参数中的员工id，拉取对应详情
  this.route.paramMap.pipe(
    switchMap(params => {
      const empId = params.get('id');
      // 没拿到id就返回空对象，避免接口报错
      if (!empId) return [EmployeeHelper.empty()];
      return this.employeeService.getDetail(empId);
    })
  ).subscribe(detail => {
    this.employee = detail;
    // 如果需要跨组件共享详情数据，可以在这里通知service的employee$主题
    // this.employeeService.employee$.next(detail);
  });
}

3. （可选）修复列表模板的HTML结构问题 #

你当前的employee-home.component.html里，删除、编辑按钮直接放在<tr>标签下，没有包裹在<td>中，不符合HTML表格语法规范，浏览器渲染时可能把按钮挤出表格区域，把这两个按钮移到最后一个单元格即可：

<tbody>
<tr *ngFor="let employee of employees">
  <td>{{ employee.account.lastname }} <button class="btn btn-warning" (click)="goToDetails(employee.id)">Go to</button></td>
  <td>{{ employee.account.firstname }}</td>
  <td>{{ employee.organization.name }}</td>
  <td>{{ employee.role.name }}</td>
  <td>
    <button class="btn btn-danger" (click)="onDeleteEmployee(employee.id)">Delete</button>
    <button class="btn btn-warning" (click)="onEditEmployee(employee); onShowForm()">Edit</button>
  </td>
</tr>
</tbody>

改完后按顺序验证：

• 进入列表页，正常调用getList()拉取全量员工数据渲染表格
• 点击任意条目的「Go to」按钮，正常跳转到detail/[员工id]路由
• 详情页加载时自动读取路由里的id，调用getDetail()拉取对应员工信息，赋值给本地变量后模板正常渲染内容

你之前已经在Postman验证过两个接口逻辑正常，服务层代码不需要改动，补上上面缺失的跳转、参数读取逻辑就能正常运行。

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