Angular子组件无法获取指定ID详情问题排查求助

阿华AIGC实验室

2026-4-30

解决Angular子组件无法正确获取指定ID详情的问题

我来帮你排查并解决这个问题，从你的代码来看，主要有几个关键问题导致功能异常：

1. 路由参数获取方式错误（最核心问题）

你现在通过this.Route.url.substring()来截取ID，这种方式非常脆弱——一旦路由结构变化就会失效，而且容易得到错误的字符串。Angular提供了专门的ActivatedRoute来安全获取路由参数。

修复方法：

在子组件policy-details.ts中，注入ActivatedRoute，然后通过paramMap订阅路由参数：

import { ActivatedRoute } from '@angular/router';
// ... 其他必要导入

constructor(
  private route: ActivatedRoute,
  private projectclosterservice: ProjectClosterService
) {}

ngOnInit(): void {
  // 订阅路由参数变化，确保每次路由更新都能获取最新ID
  this.route.paramMap.subscribe(params => {
    const productId = params.get('id'); 
    this.GetProductDatabyID(productId);
  });
}

GetProductDatabyID(id: string) {
  this.projectclosterservice.getNetworkList()
    .subscribe(data => {
      this.ProductData = data['1tool-gitlab-pipeline'];
      // 注意：如果你的id是数字类型，需要把字符串转成数字再比较（用+id）
      const matchedProducts = this.ProductData.filter((r: any) => r.id == +id);
      if(matchedProducts.length > 0){
        this.DisplayProductList = matchedProducts;
        console.log(this.DisplayProductList);
      } else {
        // 可以添加无数据提示逻辑
        this.DisplayProductList = [];
        console.log('未找到对应ID的产品');
      }
    }, error => { 
      console.error('获取数据失败:', error);
    });
}

2. 父组件中`router-outlet`的位置错误

你把<router-outlet>放在了*ngFor循环里面，这会导致每次循环都生成一个路由出口。当你导航到子路由时，所有循环项都会渲染子组件，这就是为什么你看到所有ID详情的原因。

修复方法：

把<router-outlet>移到*ngFor循环外面，确保只有一个路由出口：

<!-- ne-policy.html -->
<div class="pb-3 pl-3" *ngFor="let product of selectedItemsList">
  <h4 class="fw-500 fw-b">
    <a (click)="openCaseDetails(product.id)">{{ product.template_name }}</a>
  </h4>
  <p>{{ product.template_name }}</p>
</div>
<!-- 将路由出口移到循环外部 -->
<router-outlet></router-outlet>