Angular中能否用EventEmitter实现模板与父组件的事件交互？

你当前的实现方式不可行，核心问题在于**ng-template是模板片段而非组件实例**，无法直接通过@Output()和EventEmitter与父组件建立事件绑定。你在模板里调用的this.validate.emit()，既没有在模板所属上下文里定义validate这个EventEmitter，也没法让ng-container上的(validate)监听到事件。

下面提供两种可行的实现方案：

方案一：通过模板上下文传递回调函数 #

直接把父组件的回调方法传入模板上下文，在模板里调用该方法完成事件传递：

父组件代码修改 #

<div>
  <ng-container
    *ngTemplateOutlet="
      field.field.editTemplate;
      context: {
        dataItem: field,
        onValidate: () => validateField(field)
      }
    "
  ></ng-container>
</div>

模板代码修改 #

<ng-template let-dataItem="dataItem" let-onValidate="onValidate" #EditTemplate>
  <div
    class="noselect"
    style="position: absolute; margin: 0px; height: 100%; width: 100%"
  >
    <input
      type="checkbox"
      [id]="'customCheckbox' + dataItem.id"
      [(ngModel)]="dataItem.isChecked"
      style="display: none"
    />
    <label
      [for]="'customCheckbox' + dataItem.id"
      (click)="onValidate()"
    >
      <i
        *ngIf="dataItem.isChecked; else uncheckedIcon"
        style="cursor: pointer; color: forestgreen; font-size: 200%"
        class="material-icons icons-lg"
        >check_circle_outline</i
      >
      <ng-template #uncheckedIcon>
        <i
          placement="bottom"
          style="cursor: pointer; color: rgb(0, 110, 255); font-size: 200%"
          class="material-icons icons-lg"
          >check_circle_outline</i
        >
      </ng-template>
    </label>
  </div>
</ng-template>

逻辑代码调整 #

不需要保留onClic方法，模板点击时直接调用上下文传入的onValidate即可。

方案二：封装为独立组件（推荐） #

如果模板逻辑复杂，建议把模板内容封装成独立组件，通过@Output()实现标准的组件事件传递：

1. 创建CheckboxFieldComponent组件 #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-checkbox-field',
  template: `
    <div
      class="noselect"
      style="position: absolute; margin: 0px; height: 100%; width: 100%"
    >
      <input
        type="checkbox"
        [id]="'customCheckbox' + dataItem.id"
        [(ngModel)]="dataItem.isChecked"
        style="display: none"
      />
      <label
        [for]="'customCheckbox' + dataItem.id"
        (click)="onClick()"
      >
        <i
          *ngIf="dataItem.isChecked; else uncheckedIcon"
          style="cursor: pointer; color: forestgreen; font-size: 200%"
          class="material-icons icons-lg"
          >check_circle_outline</i
        >
        <ng-template #uncheckedIcon>
          <i
            placement="bottom"
            style="cursor: pointer; color: rgb(0, 110, 255); font-size: 200%"
            class="material-icons icons-lg"
            >check_circle_outline</i
          >
        </ng-template>
      </label>
    </div>
  `
})
export class CheckboxFieldComponent {
  @Input() dataItem: any;
  @Output() validate = new EventEmitter<boolean>();

  onClick() {
    this.validate.emit(true);
  }
}

2. 父组件中使用该组件 #

<div>
  <app-checkbox-field
    [dataItem]="field"
    (validate)="validateField(field)"
  ></app-checkbox-field>
</div>

这种方式更符合Angular的组件化设计，逻辑清晰，也便于后续维护和复用。

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