Angular中如何在另一个组件展示点击的用户档案数据？

别担心，这是Angular新手很常见的问题！你现在的核心问题是在MemberComponent里只拿到了路由传递的id，但不知道怎么关联到对应用户名。下面是一步步的解决方案，同时帮你优化代码结构，贴合Angular的最佳实践：

第一步：创建共享数据服务（推荐做法） #

组件之间共享数据最好用服务，而非直接引用另一个组件。先创建MemberService来统一管理成员数据：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 让服务在整个应用中全局可用
})
export class MemberService {
  // 将成员数据统一放在服务中
  members = [
    {'id': 1, 'name': 'Person 1'},
    {'id': 2, 'name': 'Person 2'},
    {'id': 3, 'name': 'Person 3'}
  ];

  constructor() { }

  // 根据id查找对应成员的方法
  getMemberById(id: number) {
    return this.members.find(member => member.id === id);
  }
}

第二步：修改MembersComponent，通过服务获取数据 #

把原组件内的members数组移到服务后，修改MembersComponent注入服务并获取数据：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { MemberService } from './member.service'; // 导入服务

@Component({
  selector: 'app-members',
  template: `
    <li *ngFor='let member of members' (click)='onSelect(member)'>
      <span class='badge'> {{member.name}} : {{member.id}} </span>
    </li>
  `,
  styleUrls: ['./members.component.css']
})
export class MembersComponent implements OnInit {
  members: any[];

  // 注入Router和MemberService
  constructor(private router: Router, private memberService: MemberService) { }

  ngOnInit() {
    // 从服务中获取成员数据
    this.members = this.memberService.members;
  }

  onSelect(member) {
    this.router.navigate(['/member', member.id]);
  }
}

第三步：修改MemberComponent，获取路由参数并展示用户名 #

现在在MemberComponent里，我们可以通过ActivatedRoute拿到路由里的id，再借助服务找到对应用户：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MemberService } from '../member.service'; // 导入服务

@Component({
  selector: 'app-member',
  template: `
    You have clicked on {{ selectedMember?.name }} profile!
  `,
  styleUrls: ['./member.component.css']
})
export class MemberComponent implements OnInit {
  selectedMember: any;

  // 注入ActivatedRoute和MemberService
  constructor(private route: ActivatedRoute, private memberService: MemberService) { }

  ngOnInit() {
    // 订阅路由参数变化（这样从一个成员页跳转另一个时，组件无需重载就能更新数据）
    this.route.params.subscribe((params) => {
      // 将路由中的字符串id转为数字类型
      const memberId = +params['id'];
      // 通过服务找到对应成员
      this.selectedMember = this.memberService.getMemberById(memberId);
    });
  }
}

关键细节说明： #

• 为什么用服务？：组件的核心职责是展示视图和处理交互，数据管理交给服务能让代码更易维护，还能实现多组件数据共享。
• 订阅路由参数：用subscribe而非route.snapshot.params，是因为如果用户在成员详情页直接跳转其他成员（比如通过导航），组件能实时更新数据，无需重新加载。
• 可选链操作符?.：selectedMember?.name可以避免数据未加载完成时出现undefined报错，提升页面稳定性。

另外，你之前在MemberComponent中导入MembersComponent是错误的做法，组件间不应直接引用，服务才是正确的数据共享方式。

内容的提问来源于stack exchange，提问作者Jan van Bergen