Angular 实现点击产品列表项切换至独立产品详情组件的方法

第一步：在MainModule中配置对应路由规则 #

你当前的组件都隶属于MainModule，不需要把路由提升到AppModule配置，直接在MainModule的路由数组中声明两个组件的匹配规则即可：

// main.module.ts 中的路由配置
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

// 路由规则：默认路径展示商品列表，带id参数的路径展示对应商品详情
const mainRoutes: Routes = [
  { path: 'products', component: ProductListComponent },
  { path: 'products/:productId', component: ProductDetailComponent },
  { path: '', redirectTo: '/products', pathMatch: 'full' }
];

@NgModule({
  imports: [
    // 特性模块的路由必须用forChild引入
    RouterModule.forChild(mainRoutes)
  ],
  exports: [RouterModule]
})
export class MainModule {}

配置完成后，把MainModule根模板里原来用来手动切换列表/详情显隐的占位区域，直接替换成<router-outlet></router-outlet>。路由会根据当前URL自动匹配对应组件渲染，完全覆盖原有内容，刚好实现你要的“点击商品后用详情视图替换整个列表视图”的效果，不需要再在组件里写*ngIf判断显隐。

第二步：改造商品点击的跳转逻辑 #

你当前的ProductListComponent嵌套了ProductItemComponent，之前的逻辑大概率是在ProductItem里绑定点击事件、通过@Output把选中的商品传给父级组件切显隐状态，现在可以直接替换为路由跳转：

• 最简洁的实现：直接在ProductItem的模板里，给商品卡片元素加上路由绑定，不需要写额外的TS事件逻辑：

  <!-- product-item.component.html 中商品卡片的标签上 -->
  <div class="product-card" [routerLink]="['/products', product.id]">
    <!-- 保留原有商品图片、名称、价格等展示内容 -->
  </div>
  

• 如果你需要在跳转前加额外逻辑（比如埋点、登录状态校验），可以在ProductItem的TS代码里注入Router服务，在点击事件里调用this.router.navigate(['/products', product.id])完成跳转，不需要再把事件一层层冒泡传给父级列表组件。

第三步：适配ProductDetailComponent的数据获取逻辑 #

之前的详情组件大概率是通过@Input()接收列表组件传过来的选中商品对象，现在需要改为从路由参数中拿到商品ID，再调用已有的Django API接口拉取对应商品的详情数据：

// product-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductService } from '../shared/product.service'; // 已封装的商品接口服务

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html'
})
export class ProductDetailComponent implements OnInit {
  product: any;

  constructor(
    private route: ActivatedRoute,
    private productService: ProductService
  ) {}

  ngOnInit(): void {
    // 订阅路由参数变化，拿到当前URL里的商品ID
    this.route.paramMap.subscribe(params => {
      const targetId = Number(params.get('productId'));
      // 调用已有的Django接口拉取单条商品数据
      this.productService.getProductById(targetId).subscribe(res => {
        this.product = res;
      })
    })
  }
}

• 删掉冗余的手动视图切换状态：把ProductListComponent里维护的showDetail、selectedProduct这类用来控制详情显隐的变量，还有对应的*ngIf逻辑全部移除，视图切换完全交给路由控制，减少不必要的组件变更检测开销。
• 简化嵌套组件的事件传递链路：取消ProductItemComponent到ProductListComponent的@Output事件绑定，减少跨组件传值的代码量，避免嵌套层级加深后出现事件错配的问题。
• 统一API请求逻辑：把之前散落在各个组件里调用Django接口的代码，全部抽到独立的ProductService中维护，ProductList拉列表、ProductDetail拉单条详情都从这个服务发请求，后续修改接口地址、加请求拦截只需要改一个文件。
• 移除详情组件的冗余入参：把ProductDetailComponent上之前用来接收父组件传值的@Input()属性删掉，让详情组件完全靠路由参数和服务取数据，避免组件因为没有收到入参出现渲染报错，也方便后续在其他页面直接复用详情组件。
• 路由配置避坑：根模块AppModule里初始化路由时只需要调用一次RouterModule.forRoot(根路由配置)，所有特性模块（比如你的MainModule）的路由必须用forChild引入，不要在特性模块里误用forRoot，否则会出现路由实例初始化重复、跳转不生效的问题。

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