Angular 17中如何禁止自定义按钮组件使用(click)事件？

你需要强制团队使用(action)而非(click)绑定自定义按钮组件，这里提供两种层级的解决方案，从长远规范到临时兜底：

一、编译时拦截（推荐，长期规范） #

要在开发阶段就抛出错误，最靠谱的方式是自定义ESLint规则，这也是Angular项目统一代码规范的标准做法，能在编码、提交代码时直接拦截错误用法。

实现思路： #

1. 新建ESLint规则文件（比如src/eslint-rules/no-app-button-click.ts），编写规则逻辑：扫描模板中的<app-button>标签，一旦发现绑定了(click)事件就抛出错误提示。
2. 在ESLint配置中引入该规则并设为error级别，强制生效。

示例规则代码：

import { Rule } from '@angular-eslint/utils';
import { Selectors } from '@angular-eslint/utils/ast';

export const rule: Rule.RuleModule = {
  meta: {
    type: 'problem',
    docs: {
      description: 'app-button组件禁止绑定(click)，请使用(action)替代',
      recommended: 'error',
    },
    schema: [],
  },
  create(context) {
    return {
      [Selectors.ELEMENT_WITH_ATTRIBUTES](node: any) {
        if (node.name === 'app-button') {
          const hasClickBinding = node.attributes.some(
            (attr: any) => attr.name.name === 'click' || attr.name.rawName === '(click)'
          );
          if (hasClickBinding) {
            context.report({
              node: node,
              message: '⚠️ app-button组件禁止使用(click)事件，请改用(action)',
            });
          }
        }
      },
    };
  },
};

配置完成后，团队成员只要在模板中写<app-button (click)="xxx">，ESLint就会直接标红报错，从根源上纠正习惯问题。

二、运行时兜底（临时方案） #

如果暂时无法搭建ESLint规则，可以在组件内部做运行时检测，一旦发现外部绑定了(click)就抛出错误。

方案1：检测DOM属性 #

通过ElementRef获取组件DOM元素，检查是否存在(click)或click属性：

import { Component, OnInit, ElementRef } from '@angular/core';
import { EventEmitter, Output } from '@angular/core';
import { ButtonModule } from 'primeng/button';

@Component({
  selector: 'app-button',
  standalone: true,
  imports: [ ButtonModule ],
  template: '<p-button (click)="emit()" (keydown.enter)="emit()" />'
})
export class ButtonComponent implements OnInit {

  @Output() public action = new EventEmitter<void>();

  constructor(private elRef: ElementRef<HTMLElement>) {}

  public emit(): void {
    this.action.emit();
  }

  public ngOnInit(): void {
    const element = this.elRef.nativeElement;
    if (element.hasAttribute('(click)') || element.hasAttribute('click')) {
      throw new Error('禁止在app-button上使用(click)，请改用(action)事件');
    }
  }
}

方案2：拦截click输出事件 #

主动声明@Output() click，通过检测订阅者数量判断是否有人绑定了该事件：

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

@Component({
  selector: 'app-button',
  standalone: true,
  imports: [ ButtonModule ],
  template: '<p-button (click)="emit()" (keydown.enter)="emit()" />'
})
export class ButtonComponent implements OnInit {

  // 主动声明click输出，拦截外部订阅
  @Output() click = new EventEmitter<void>();
  @Output() action = new EventEmitter<void>();

  public emit(): void {
    this.action.emit();
  }

  public ngOnInit(): void {
    if (this.click.observers.length > 0) {
      throw new Error('app-button禁止使用(click)，请使用(action)替代');
    }
  }
}

这种方式会覆盖组件继承的默认click输出，只要外部绑定了(click)，组件初始化时就会抛出错误。

注意事项 #

• 内部<p-button>的click绑定完全不受影响，因为是组件内部逻辑，外部无法干预。
• 优先使用ESLint规则方案，能在开发阶段就解决问题，避免运行时错误带来的调试成本。

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