Angular中能否用@HostListener监听自定义EventEmitter事件？

不行，@HostListener无法直接监听子组件通过@Output触发的自定义事件。

原因说明 #

@HostListener的作用是监听当前组件宿主元素上的事件，包括原生DOM事件（如click、input）或手动触发的自定义DOM事件，但子组件的@Output事件属于Angular组件间的专属事件绑定机制——它本质上是Angular内部的Observable流，并非绑定在父组件宿主元素上的DOM事件，所以@HostListener无法捕获这类事件。

替代实现方案 #

如果希望避免在模板中写事件绑定语法，可以参考以下两种方式：

1. 通过ViewChild订阅子组件的EventEmitter
   利用ViewChild获取子组件实例，直接订阅其@Output属性（因为EventEmitter继承自RxJS的Subject）：

   import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
   import { ChildComponent } from './child.component';
   import { Subject } from 'rxjs';
   import { takeUntil } from 'rxjs/operators';
   
   @Component({
     selector: 'app-parent',
     template: '<app-child></app-child>'
   })
   export class ParentComponent implements AfterViewInit, OnDestroy {
     @ViewChild(ChildComponent) private childComponent!: ChildComponent;
     private destroy$ = new Subject<void>();
   
     ngAfterViewInit(): void {
       this.childComponent.myCustomEvent
         .pipe(takeUntil(this.destroy$))
         .subscribe(eventData => {
           this.handleCustomEvent(eventData);
         });
     }
   
     ngOnDestroy(): void {
       this.destroy$.next();
       this.destroy$.complete();
     }
   
     private handleCustomEvent(data: any): void {
       // 处理事件逻辑
     }
   }
   

2. 改用原生自定义DOM事件
   如果调整子组件的事件触发方式，改用原生DOM事件派发，父组件就能通过@HostListener监听：

   • 子组件中触发原生事件：

     import { Component, ElementRef } from '@angular/core';
     
     @Component({
       selector: 'app-child',
       template: '<button (click)="triggerEvent()">触发事件</button>'
     })
     export class ChildComponent {
       constructor(private el: ElementRef) {}
     
       triggerEvent(): void {
         this.el.nativeElement.dispatchEvent(
           new CustomEvent('myCustomEvent', { detail: '自定义数据' })
         );
       }
     }
     

   • 父组件中用@HostListener监听：

     import { Component, HostListener } from '@angular/core';
     
     @Component({
       selector: 'app-parent',
       template: '<app-child></app-child>'
     })
     export class ParentComponent {
       @HostListener('myCustomEvent', ['$event'])
       handleCustomEvent(event: CustomEvent): void {
         console.log('捕获到事件：', event.detail);
       }
     }
     

   这种方式脱离了Angular的组件事件体系，需要自行处理事件传递和清理，仅适合特定场景。

总结 #

如果使用Angular标准的@Output组件事件机制，最规范且易维护的方式仍是模板中的(myCustomEvent)="myMethod()"语法；若想通过代码逻辑绑定，优先选择ViewChild订阅事件流的方案。@HostListener并不适用于监听子组件的@Output事件。

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