Angular中如何通过服务将ngFor循环的index值传递给其他组件

1. 创建共享数据服务 #

先通过Angular CLI生成共享服务，执行命令：
ng generate service services/product-share
也可以手动创建服务文件，服务代码示例如下：

// product-share.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 全局注入，无需额外在模块的providers中声明
})
export class ProductShareService {
  // 用BehaviorSubject存储选中的商品下标，初始默认值设为-1代表未选中
  private selectedIndex$ = new BehaviorSubject<number>(-1);

  // 对外暴露设置下标的方法
  setSelectedIndex(index: number) {
    this.selectedIndex$.next(index);
  }

  // 对外暴露获取下标的可观察对象，供组件订阅
  getSelectedIndex() {
    return this.selectedIndex$.asObservable();
  }

  // 建议同时把products数组也存在该服务里，避免两个组件分别维护数据不一致
  // 示例：private productList = [你的商品数组]; getProductList(){return this.productList}
}

2. 调整Home组件的跳转逻辑 #

你原有代码直接绑定了routerLink，需要改成点击时先存下标再跳转，修改模板代码：

<!-- home组件模板 -->
<div class="prod-div" *ngFor="let product of products; let i = index" [id]="i" (click)="goToProdDesc(i)"> 

修改Home组件的TS代码：

// home.component.ts
import { Router } from '@angular/router';
import { ProductShareService } from './services/product-share.service';

export class HomeComponent {
  constructor(
    private productShareService: ProductShareService,
    private router: Router
  ) {}

  goToProdDesc(index: number) {
    // 先把选中的下标存入服务
    this.productShareService.setSelectedIndex(index);
    // 再跳转至详情页
    this.router.navigate(['/prod-desc']);
  }
}

3. 在prod-desc组件中接收下标 #

在详情页中订阅服务的下标变化，拿到下标后即可读取对应商品信息：

// prod-desc.component.ts
import { OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { ProductShareService } from './services/product-share.service';

export class ProdDescComponent implements OnInit, OnDestroy {
  selectedIndex = -1;
  currentProduct: any;
  private indexSub!: Subscription;

  constructor(private productShareService: ProductShareService) {}

  ngOnInit() {
    // 订阅下标变化
    this.indexSub = this.productShareService.getSelectedIndex().subscribe(index => {
      this.selectedIndex = index;
      // 从服务中取商品数组，拿到对应下标的商品详情
      // this.currentProduct = this.productShareService.getProductList()[index];
    })
  }

  // 组件销毁时取消订阅，避免内存泄漏
  ngOnDestroy() {
    if(this.indexSub) this.indexSub.unsubscribe();
  }
}

补充：如果没有强制要求用服务传参，也可以直接通过路由查询参数传下标，写法更简单，但你要求用服务实现的话上述方案即可正常运行。

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