Angular中*NgFor数据展示及选中数据跨组件传递方案咨询

当然可以实现啦！在Angular里把*ngFor选中的数据传递到另一个组件页面，有几种非常实用的思路，我给你一步步拆解清楚：

这是最常用的方案之一，适合通过唯一标识（比如id）就能获取完整数据的场景：

• 第一步：配置带参数的路由
  在你的路由配置文件（比如app-routing.module.ts）里，给DetailsComponent添加带参数的路由规则：

  const routes: Routes = [
    { path: 'result', component: ResultComponent },
    { path: 'details/:itemId', component: DetailsComponent } // 这里的:itemId就是动态参数
  ];
  

• 第二步：在Result组件中添加跳转逻辑
  给*ngFor渲染的每个元素绑定点击事件，点击时通过Router导航到详情页并传递id：

  // result.component.ts
  import { Router } from '@angular/router';
  import { Component } from '@angular/core';
  
  @Component({ /* 组件元数据 */ })
  export class ResultComponent {
    items = [/* 你的数据数组 */];
  
    constructor(private router: Router) {}
  
    navigateToDetails(item: any) {
      // 跳转到详情页，把item的id作为路由参数传递
      this.router.navigate(['/details', item.id]);
    }
  }
  

  对应的模板：

  <!-- result.component.html -->
  <div *ngFor="let item of items" (click)="navigateToDetails(item)" style="cursor: pointer;">
    <!-- 展示item的简要信息，比如名称、缩略图等 -->
    <h3>{{ item.name }}</h3>
  </div>
  

• 第三步：在Details组件中获取参数并加载数据
  使用ActivatedRoute获取路由参数，再根据id获取完整的详情数据（可以从服务或本地数组中获取）：

  // details.component.ts
  import { ActivatedRoute } from '@angular/router';
  import { Component, OnInit } from '@angular/core';
  import { DataService } from './data.service'; // 假设你有数据服务
  
  @Component({ /* 组件元数据 */ })
  export class DetailsComponent implements OnInit {
    selectedItem: any;
  
    constructor(
      private route: ActivatedRoute,
      private dataService: DataService
    ) {}
  
    ngOnInit() {
      // 获取路由参数中的itemId
      const itemId = this.route.snapshot.paramMap.get('itemId');
      if (itemId) {
        // 从数据服务中获取对应id的详情数据
        this.selectedItem = this.dataService.getItemById(Number(itemId));
        // 如果是异步请求（比如HTTP接口），记得用subscribe：
        // this.dataService.getItemById(Number(itemId)).subscribe(item => this.selectedItem = item);
      }
    }
  }
  

如果需要传递完整的对象，或者不想把数据标识暴露在URL里，用共享服务是最佳选择：

• 第一步：创建共享数据服务
  定义一个带有BehaviorSubject的服务（BehaviorSubject会保存最新值，新组件订阅时能直接拿到数据）：

  // data-share.service.ts
  import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  
  @Injectable({ providedIn: 'root' }) // 全局提供服务
  export class DataShareService {
    // 初始化Subject，默认值为null
    private selectedItemSubject = new BehaviorSubject<any>(null);
    // 对外暴露可观察对象，防止外部直接修改Subject
    selectedItem$ = this.selectedItemSubject.asObservable();
  
    // 设置选中的项
    setSelectedItem(item: any) {
      this.selectedItemSubject.next(item);
    }
  }
  

• 第二步：在Result组件中设置选中项并跳转
  点击时先通过服务保存选中的数据，再导航到详情页：

  // result.component.ts
  import { Router } from '@angular/router';
  import { Component } from '@angular/core';
  import { DataShareService } from './data-share.service';
  
  @Component({ /* 组件元数据 */ })
  export class ResultComponent {
    items = [/* 你的数据数组 */];
  
    constructor(
      private router: Router,
      private dataShareService: DataShareService
    ) {}
  
    navigateToDetails(item: any) {
      // 先把选中的对象存入服务
      this.dataShareService.setSelectedItem(item);
      // 再跳转到详情页
      this.router.navigate(['/details']);
    }
  }
  

  模板和方法一的一致。
• 第三步：在Details组件中订阅获取数据
  订阅服务的可观察对象，拿到选中的数据，记得在组件销毁时取消订阅防止内存泄漏：

  // details.component.ts
  import { Subscription } from 'rxjs';
  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { DataShareService } from './data-share.service';
  
  @Component({ /* 组件元数据 */ })
  export class DetailsComponent implements OnInit, OnDestroy {
    selectedItem: any;
    private subscription!: Subscription;
  
    constructor(private dataShareService: DataShareService) {}
  
    ngOnInit() {
      // 订阅选中项的变化
      this.subscription = this.dataShareService.selectedItem$.subscribe(item => {
        if (item) {
          this.selectedItem = item;
        }
      });
    }
  
    ngOnDestroy() {
      // 组件销毁时取消订阅
      this.subscription.unsubscribe();
    }
  }
  

如果只需要传递少量简单的参数，也可以用查询参数（URL会显示为/details?id=1&name=xxx）：

• 路由配置不需要修改，保持{ path: 'details', component: DetailsComponent }即可。
• Result组件跳转时传递查询参数：

  navigateToDetails(item: any) {
    this.router.navigate(['/details'], {
      queryParams: { id: item.id, name: item.name }
    });
  }
  

• Details组件获取查询参数：

  ngOnInit() {
    const itemId = this.route.snapshot.queryParamMap.get('id');
    const itemName = this.route.snapshot.queryParamMap.get('name');
    // 后续根据参数获取数据
  }
  

总结一下 #

• 如果数据可以通过唯一标识获取，路由参数是最直观、SEO友好的选择；
• 如果要传递完整对象或不想暴露参数，共享服务是最灵活的方案；
• 简单的键值对传递可以用查询参数。

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