Angular组件如何强制绑定@Output事件？类似selector属性校验方式

Angular组件选择器的原生语法只支持对属性、类、标签做强制要求，比如element[title]，但不支持直接通过选择器强制绑定@Output事件（你尝试的element[title](customEvent)是无效语法）。要实现“运行前（编译/IDE阶段）就提示错误”的需求，推荐用以下方案：

方案1：自定义ESLint规则（推荐，实现编译期校验） #

Angular项目默认集成ESLint，你可以写一个自定义规则来检查模板中使用目标组件时是否绑定了指定事件，这样在编写代码时IDE就能实时提示错误，运行ng lint也会拦截问题代码。

规则实现思路 #

1. 遍历模板的AST语法树，找到目标组件的元素节点（比如标签名为element）
2. 检查该节点是否存在(customEvent)的事件绑定属性
3. 如果未绑定，抛出lint错误

简单规则示例（伪代码） #

module.exports = {
  create(context) {
    return {
      HTMLElement(node) {
        // 匹配目标组件标签
        if (node.tagName === 'element') {
          // 检查是否存在customEvent事件绑定
          const hasRequiredEvent = node.attributes.some(attr => 
            attr.name === '(customEvent)'
          );
          if (!hasRequiredEvent) {
            context.report({
              node,
              message: '<element> 组件必须绑定 (customEvent) 事件'
            });
          }
        }
      }
    };
  }
};

把这个规则加入项目的ESLint配置后，就能在编写模板时实时得到错误提示，完全满足“运行前校验”的需求。

方案2：运行时校验（备选，临时场景用） #

如果暂时不想写自定义lint规则，可以在组件内部做运行时检查，虽然是运行时才报错，但能快速发现未绑定事件的问题：

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

@Component({
  selector: 'element[title]',
  template: '<p>组件内容</p>'
})
export class ElementComponent implements OnInit {
  @Output() customEvent = new EventEmitter<boolean>();

  ngOnInit(): void {
    // 检查是否有订阅者（即父组件是否绑定了事件）
    if (this.customEvent.observers.length === 0) {
      throw new Error('<element> 组件必须绑定 (customEvent) 事件');
    }
  }
}

注意：这种方式是运行时触发错误，不符合你“运行前提示”的核心需求，仅作为临时方案使用。

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