Angular父子组件Output传值失效：按钮点击无跳转问题

以下是针对点击按钮无反应、无法跳转商品详情页问题的排查方向和修复方案：

1. 确认子组件productItem是否正确传入 #

子组件通过@Input()接收productItem，若父组件（product-list）未给<lpr-product-item>传入该值，this.productItem.sku会抛出undefined错误，直接中断事件触发流程。

修复：在product-list的模板中绑定productItem，如果是列表需循环渲染：

<div class="header__searchResultsContainer">
  <div class="header__searchResults">
    <!-- 假设products是product-list组件中的商品数组 -->
    <lpr-product-item 
      *ngFor="let product of products"
      [productItem]="product"
      (showDetail)="handleShowDetail($event)"
    ></lpr-product-item>
  </div>
</div>

2. 验证EventEmitter的导入与初始化 #

确保子组件和中间组件都正确导入所需模块：

// product-item.component.ts 和 product-list.component.ts 顶部需添加
import { Component, Input, Output, EventEmitter } from '@angular/core';

3. 检查路由配置有效性 #

顶层组件调用this.router.navigate(['/product-details'])时，需确保目标组件已在路由模块中注册：

// app-routing.module.ts示例
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductDetailsComponent } from './path/to/product-details.component';

const routes: Routes = [
  // ...其他路由
  { path: 'product-details', component: ProductDetailsComponent },
];

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

同时顶层组件需注入Router服务：

// product-container.component.ts
import { Router } from '@angular/router';

constructor(private router: Router) { }

handleShowDetail(sku: string){
  // 可选：将sku作为参数传入详情页
  this.router.navigate(['/product-details', sku]);
}

4. 查看控制台错误信息 #

打开浏览器开发者工具（F12）的Console面板，检查是否存在Cannot read property 'sku' of undefined、路由不存在等报错，这类错误会阻断事件传递链。

5. 确认组件选择器匹配 #

检查<lpr-product-item>和<lpr-products-list>是否与组件定义的selector完全一致：

// product-item.component.ts示例
@Component({
  selector: 'lpr-product-item',
  // ...其他配置
})

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