Angular 14中调用父组件函数的正确方法（事件方式失效排查）

我希望通过事件触发调用父组件的函数，参考相关方法后未生效，代码如下：

子组件代码（childComponent.ts） #

// 获取父组件方法（Equipments）
@Output() addCompleted = new EventEmitter<string>();
processComplete() {
      this.addCompleted.emit('complete');
}

父组件代码（parentComponent.ts） #

onUpdateGrid(e: any){
    alert("Works!")
  }

父组件模板（parentComponent.html） #

<ejs-grid #Grid class="data-grid" (addCompleted)="onUpdateGrid($event)" . . .>
    . . . .
</ejs-grid>

由于@Component中的directives: [ ChildComponent ]已被弃用，我未配置该项，但运行后父组件的方法并未执行。

更新：子组件装饰器代码 #

@Component({
  selector: 'app-add-equipment',
  templateUrl: './add-equipment.component.html',
  styleUrls: ['./add-equipment.component.scss']
})

问题排查与解决 #

1. 事件绑定对象错误：你把(addCompleted)事件绑定到了<ejs-grid>组件上，但这个事件是子组件app-add-equipment定义的，必须绑定在子组件的标签上，而非第三方grid组件。修正后的父组件模板示例：

<ejs-grid #Grid class="data-grid" . . .>
    <!-- 嵌入子组件并绑定事件 -->
    <app-add-equipment (addCompleted)="onUpdateGrid($event)"></app-add-equipment>
    . . . .
</ejs-grid>

2. 确认子组件的模块声明：Angular新版本中无需directives数组，但要保证子组件AddEquipmentComponent已在父组件所在模块的declarations数组中声明，或者子组件所在的模块已被导入到父模块。

3. 检查事件触发逻辑：确认子组件中的processComplete()方法确实被执行（比如通过按钮点击、异步任务完成等场景触发），如果该方法未调用，事件自然不会被发射。

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