Angular嵌套组件场景下父组件click事件偶发不触发如何解决？

偶发仅子组件函数生效的核心原因是默认DOM事件冒泡链路被中断：中间层级的product-list-component或single-product内部若存在event.stopPropagation()调用、异步事件逻辑、或点击区域未命中外层绑定事件的DOM节点，都会导致父级saveInfo()无法触发。

以下是可落地的解决方法：

• 方案1：保留事件冒泡机制，主动排查阻断逻辑
  子组件点击事件绑定传入事件对象，确保无冒泡阻断调用：

  <div (click)="navigateToDetailsProduct($event)"></div>
  

  对应TS逻辑中不要调用event.stopPropagation()，若需阻止默认行为仅调用event.preventDefault()即可：

  navigateToDetailsProduct(event: MouseEvent) {
    // 原有业务逻辑执行
    // event.stopPropagation() 会阻断冒泡，删除该行代码
  }
  

  同时排查product-list-component、single-product两个中间组件的点击事件逻辑，删除不必要的stopPropagation调用。

• 方案2：基于Angular Output主动触发父级方法（最稳定，不依赖DOM冒泡）
  该方案完全脱离DOM事件冒泡规则，不会因中间组件逻辑调整失效，推荐优先使用：

  1. 在single-product组件定义输出事件，子组件逻辑执行后主动抛出事件：

  import { Output, EventEmitter } from '@angular/core';
  
  @Output() productClicked = new EventEmitter<void>();
  
  navigateToDetailsProduct() {
    // 原有业务逻辑执行
    this.productClicked.emit();
  }
  

  2. 中间层product-list-component接收事件后向上透传：
     模板中绑定子组件输出事件：

  <single-product (productClicked)="handleProductClick()"></single-product>
  

  组件内部定义输出事件向外透传：

  @Output() productClicked = new EventEmitter<void>();
  
  handleProductClick() {
    this.productClicked.emit();
  }
  

  3. 最外层父组件接收事件执行对应逻辑：

  <div>
    <product-list-component (productClicked)="saveInfo()">
      <single-product>
        <div (click)="navigateToDetailsProduct()"></div>
      </single-product>
    </product-list-component>
  </div>
  

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