Angular中如何通过RouterLink在组件间传递数组特定数据

1. 给循环元素添加点击事件并传递ID #

在Home组件的HTML模板中，找到*ngFor循环的元素，添加点击事件并传入对应的解决方案ID：

<div *ngFor="let solution of solutions" (click)="handleSolutionClick(solution.id)">
  {{ solution.name }}
</div>

注意：这里假设数组元素中存储ID的字段是id，如果实际字段名不同（比如solutionId），请替换成对应字段。

2. 在Home组件中实现点击事件逻辑 #

根据你和Customer组件的关系，选择合适的通信方式：

方式一：通过路由跳转传递ID（适合路由导航场景） #

• 在Home组件的TS文件中导入并注入Router：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  solutions: any[] = [];

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 保留你原有的API数据获取及数组转换逻辑
    // 示例：
    // this.apiService.getSolutions().subscribe(res => {
    //   this.solutions = res.solutions;
    // });
  }

  handleSolutionClick(solutionId: number): void {
    // 跳转到Customer组件，将ID作为路由参数传递
    this.router.navigate(['/customer', solutionId]);
  }
}

• 在路由配置文件中，给Customer组件的路由添加参数占位符：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CustomerComponent } from './customer/customer.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'customer/:id', component: CustomerComponent } // 添加:id参数
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• 在Customer组件中接收路由参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
  selectedSolutionId: number | null = null;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅路由参数变化，获取传递的ID
    this.route.paramMap.subscribe(params => {
      const id = params.get('id');
      this.selectedSolutionId = id ? +id : null;
      // 拿到ID后执行你的业务逻辑
    });
  }
}

方式二：通过组件输入输出传递ID（适合父子组件嵌套场景） #

如果Customer组件是Home组件的子组件：

• 在Home组件的TS中定义@Output事件发射器：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  solutions: any[] = [];
  @Output() solutionSelected = new EventEmitter<number>();

  ngOnInit(): void {
    // 保留你原有的API数据获取及数组转换逻辑
  }

  handleSolutionClick(solutionId: number): void {
    this.solutionSelected.emit(solutionId);
  }
}

• 在Home组件的HTML中绑定事件并传递ID给子组件：

<!-- 渲染Customer子组件 -->
<app-customer [selectedId]="selectedSolutionId"></app-customer>

<!-- 循环展示解决方案的元素 -->
<div *ngFor="let solution of solutions" (click)="handleSolutionClick(solution.id)">
  {{ solution.name }}
</div>

• 在Customer组件中通过@Input接收ID：

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnChanges {
  @Input() selectedId: number | null = null;

  ngOnChanges(): void {
    // 当ID变化时执行业务逻辑
    if (this.selectedId !== null) {
      // 这里处理拿到ID后的操作
    }
  }
}

3. 确保数据中包含对应ID字段 #

从API获取并转换数组时，要保证每个元素都包含对应的解决方案ID（比如你的示例中的118、183），转换后的数组结构需类似：

this.solutions = [
  { name: 'Demand Sensing and Inventory Optimization', id: 118 },
  { name: 'content management', id: 183 }
];

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