Angular递归子元素点击事件异常：仅父元素触发点击响应

你遇到的是Angular递归组件里事件传递的典型问题——子元素点击没反应，核心原因是递归的子组件无法直接调用顶层父组件的方法，得通过@Output事件发射器把点击事件逐层向上传递才行。

问题分析 #

你的代码里，父组件模板直接在递归的<categories>组件里用了父组件的addCategory方法，但子组件内部根本没定义这个方法，所以子元素点击时找不到对应的处理函数，自然不会触发；而父元素点击能生效，是因为它所在的组件本身就有addCategory方法。

修复方案 #

我们给递归组件加上输出事件，让子组件的点击事件能向上冒泡传递到顶层父组件：

1. 完善递归组件代码

修改你的CategoriesComponent，添加@Output事件发射器，内部处理点击后把事件传递出去：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { AdminCategory } from './admin-category.component';

@Component({
  selector: 'categories',
  template: `
    <div *ngFor="let cat of categories">
      <ul>
        <li>
          <!-- 子组件内部处理点击，触发输出事件 -->
          <span (click)="handleCategoryClick(cat)">{{cat.name}}</span>
          <!-- 递归调用时，监听子组件的输出事件，继续向上传递 -->
          <categories 
            [categories]="cat.children" 
            (categoryClicked)="handleCategoryClick($event)"
          ></categories>
        </li>
      </ul>
    </div>
  `
})
export class CategoriesComponent {
  // 接收父组件传递的分类列表
  @Input() categories: AdminCategory[];
  // 定义输出事件，传递点击的分类对象
  @Output() categoryClicked = new EventEmitter<AdminCategory>();

  handleCategoryClick(cat: AdminCategory) {
    // 将点击事件向上传递
    this.categoryClicked.emit(cat);
  }
}

2. 顶层父组件监听事件

在使用<categories>的父组件模板里，监听categoryClicked事件并调用addCategory：

<!-- 顶层父组件模板 -->
<categories 
  [categories]="yourRootCategoriesList" 
  (categoryClicked)="addCategory($event)"
></categories>

3. 确保分类数据结构正确

还要确认AdminCategory接口包含子分类属性：

// admin-category.component.ts
export interface AdminCategory {
  name: string;
  // 子分类列表，用于递归渲染
  children?: AdminCategory[];
  // 其他业务属性...
}

原理说明 #

通过@Output事件发射器，每个递归子组件被点击时，都会把点击的分类对象向上传递给父组件，直到顶层父组件接收到事件并执行addCategory。这样不管是父元素还是子元素的点击，都能正确触发逻辑。

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