Angular中如何将点击项作为路由参数传递给子组件

没问题，我来给你一步步讲清楚怎么实现这个需求——这在Angular的路由场景里非常常见，咱们分几个核心步骤来做：

1. 先配置带参数的路由规则 #

首先得在你的路由模块（一般是AppRoutingModule）里，给list-detail组件定义包含参数的路由。通常我们会传递列表项的id作为唯一标识，这样既简洁又规范：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ListComponent } from './list/list.component';
import { ListDetailComponent } from './list-detail/list-detail.component';

const routes: Routes = [
  { path: 'list', component: ListComponent },
  // 用:id来定义路由参数，代表这里会接收一个名为id的动态值
  { path: 'list/detail/:id', component: ListDetailComponent },
];

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

2. 修改List组件模板，添加跳转逻辑 #

接下来在你的list组件模板里，给每个遍历的列表项添加跳转触发逻辑，有两种常用方式，你可以根据需求选：

方式一：直接用routerLink指令（最简单） #

这种方式不需要写组件逻辑，直接在模板里绑定路由路径和参数：

<div class="list">
  <!-- 补充完整你的*ngFor，假设你遍历的是currentList的items数组 -->
  <div class="list__item" *ngFor="let detailItem of currentList.items"
       [routerLink]="['/list/detail', detailItem.id]">
    <!-- 这里展示列表项内容，比如名称 -->
    {{ detailItem.name }}
  </div>
</div>

方式二：点击事件+Router服务（适合需要先处理逻辑再跳转） #

如果点击列表项时需要先做一些操作（比如日志打印、数据预处理），可以用这种方式：

首先在list组件的TS文件里注入Router服务：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { List } from './list.model';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent {
  // 假设这是你的列表数据，实际项目可能从服务获取
  currentList: List = {
    id: 1,
    name: '我的待办列表',
    items: [
      { id: 1, name: '完成Angular路由学习' },
      { id: 2, name: '整理组件模型' }
    ]
  };

  constructor(private router: Router) { }

  goToDetail(detailItem: any) {
    // 这里可以先做自定义逻辑，比如打印点击的项
    console.log('点击了列表项:', detailItem);
    // 跳转到详情页，传递id参数
    this.router.navigate(['/list/detail', detailItem.id]);
  }
}

然后在模板里绑定点击事件：

<div class="list">
  <div class="list__item" *ngFor="let detailItem of currentList.items"
       (click)="goToDetail(detailItem)">
    {{ detailItem.name }}
  </div>
</div>

3. 在ListDetail组件中接收参数并获取对应数据 #

最后一步，在list-detail组件里通过ActivatedRoute服务获取路由参数，然后根据id找到对应的详情数据：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ListDetail } from './list-detail.model';
import { List } from './list.model';

@Component({
  selector: 'app-list-detail',
  templateUrl: './list-detail.component.html',
  styleUrls: ['./list-detail.component.css']
})
export class ListDetailComponent implements OnInit {
  currentDetail: ListDetail | undefined;
  // 模拟数据源，实际项目建议用服务统一管理数据
  mockList: List = {
    id: 1,
    name: '我的待办列表',
    items: [
      { id: 1, name: '完成Angular路由学习' },
      { id: 2, name: '整理组件模型' }
    ]
  };

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 订阅路由参数变化，确保参数更新时能同步获取
    this.route.paramMap.subscribe(params => {
      // 把参数转成数字类型（因为路由参数默认是字符串）
      const detailId = Number(params.get('id'));
      // 根据id查找对应的详情项
      this.currentDetail = this.mockList.items.find(item => item.id === detailId);
    });
  }
}

然后在list-detail的模板里就可以展示详情数据了：

<div *ngIf="currentDetail">
  <h2>列表详情</h2>
  <p>ID: {{ currentDetail.id }}</p>
  <p>名称: {{ currentDetail.name }}</p>
</div>
<div *ngIf="!currentDetail">
  未找到对应的详情数据
</div>

小提示 #

不建议直接传递整个ListDetail对象作为路由参数，因为对象序列化后会让路由变得冗长，还可能出现数据格式问题。最好的实践是传递唯一标识（比如id），然后在详情组件里根据标识获取完整数据。

内容的提问来源于stack exchange，提问作者webta.st.ic