Angular独立组件属性选择器使用疑问：为何编译失败？

首先明确结论：Angular组件完全支持属性选择器，你把组件选择器定义成[dx-custom-text-box]这种方括号形式是符合官方规范的，本身没有问题。

你碰到的ESLint错误，核心原因是项目里启用的@angular-eslint/component-selector规则，当前配置强制要求组件必须以元素形式使用（比如<dx-custom-text-box></dx-custom-text-box>），不允许属性式用法，所以才会报“The selector should be used as an element”并导致编译失败。

解决办法有两种：

• 全局修改ESLint配置：找到项目中的.eslintrc.json（或对应ESLint配置文件），调整@angular-eslint/component-selector规则的type选项，允许元素和属性两种类型。示例配置如下：

{
  "rules": {
    "@angular-eslint/component-selector": [
      "error",
      {
        "type": ["element", "attribute"],
        "prefix": "dx",
        "style": "kebab-case"
      }
    ]
  }
}

• 单独给目标组件禁用规则：如果不想全局调整，可在组件类上方添加ESLint注释，跳过该组件的选择器检查：

// eslint-disable-next-line @angular-eslint/component-selector
@Component({
  selector: '[dx-custom-text-box]',
  standalone: true,
  templateUrl: './dx-custom-text-box.component.html',
  styleUrls: ['./dx-custom-text-box.component.css']
})
export class DxCustomTextBoxComponent {}

额外说明：虽然Angular允许组件用属性选择器，但这种写法更多用于增强现有元素/组件的功能，和属性指令的应用场景有重叠，使用时要确保语义清晰，避免和指令混淆。

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