Angular中Event Emitter失效问题排查及测试组件调用方法

我在autocomplete-overview-example.ts中通过监听Autocomplete的closed事件触发自定义的closevent EventEmitter，但该EventEmitter无法正常工作，想请教如何在测试组件（testing.component.ts）中正确响应这个EventEmitter。

相关代码 #

autocomplete-overview-example.ts #

ngAfterViewInit() {
  this.trigger.autocomplete.closed.subscribe(e => {
  console.log('emitted');
  this.closevent.emit();
 }) 
}

testing.component.ts #

callCloseEvent() {
    alert('success');
}

解决步骤 #

• 确认EventEmitter的正确定义
  在autocomplete-overview-example.ts中，必须用@Output()装饰器声明closevent为EventEmitter，否则无法作为组件输出事件被外部捕获：

  import { Output, EventEmitter } from '@angular/core';
  
  @Output() closevent = new EventEmitter<void>();
  

• 在测试组件模板中绑定事件
  打开testing.component.html，引入autocomplete-overview-example组件，并将其closevent事件绑定到测试组件的callCloseEvent方法：

  <app-autocomplete-overview-example (closevent)="callCloseEvent()"></app-autocomplete-overview-example>
  

• 验证上游事件触发逻辑
  手动关闭Autocomplete面板，查看浏览器控制台是否输出emitted。如果没有输出，说明this.trigger.autocomplete.closed事件本身没有触发，需要先排查Autocomplete组件的初始化或配置问题。

• 单元测试中直接调用（可选）
  如果是单元测试场景，可以直接获取autocomplete-overview-example组件实例，手动调用closevent.emit()来触发测试组件的方法：

  import { By } from '@angular/platform-browser';
  
  // 在测试用例内
  const autocompleteComp = fixture.debugElement.query(By.css('app-autocomplete-overview-example')).componentInstance;
  autocompleteComp.closevent.emit();
  fixture.detectChanges();
  // 可通过断言验证callCloseEvent是否被执行
  

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