如何在Angular的同一个组件中创建并触发自定义事件

你当前的写法无法触发事件，是因为customClick不属于浏览器内置DOM事件，没有对应的触发逻辑主动派发这个事件，所以绑定的处理函数不会执行。同一个组件内完全可以实现自定义事件，下面是两种常用实现方案：

方案1：基于原生自定义事件实现（支持事件冒泡、传参） #

步骤1：修改组件模板（app.component.html） #

给li元素添加模板引用变量，同时绑定原生click事件作为自定义事件的触发源：

<li #testItem (click)="dispatchCustomEvent(testItem)" (customClick)="cClick($event)"> Test </li>

步骤2：修改组件逻辑（app.component.ts） #

添加自定义事件派发逻辑：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 派发自定义事件
  dispatchCustomEvent(ele: HTMLElement) {
    // 创建自定义事件，detail字段可传入自定义参数
    const customEvent = new CustomEvent('customClick', {
      bubbles: true, // 可配置是否允许事件冒泡
      detail: { data: '自定义事件携带的参数' }
    });
    ele.dispatchEvent(customEvent);
  }

  // 自定义事件处理函数
  cClick(e: Event) {
    alert("custom event clicked!");
    // 读取自定义参数
    console.log((e as CustomEvent).detail);
  }
}

方案2：同组件内轻量实现（无需DOM事件） #

如果不需要事件冒泡等原生特性，只是做同组件内的逻辑解耦，直接通过方法调用就可以实现类似效果，写法更简单：

<!-- 直接绑定触发方法，内部调用cClick即可 -->
<li (click)="handleClick()"> Test </li>

// ts中实现逻辑
handleClick() {
  // 可以在这里加自定义判断逻辑，满足条件再触发cClick
  const shouldTrigger = true;
  if (shouldTrigger) {
    // 模拟自定义事件参数
    const customEventData = { msg: '自定义触发参数' };
    this.cClick(customEventData);
  }
}

cClick(data: any) {
  alert("custom event clicked!");
  console.log(data);
}

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