Angular中能否透明组合属性选择器组件，避免直接引用库属性？

你要的需求完全可以实现，核心思路是在自定义的button[appButton]组件内部自动注入第三方组件的属性选择器，这样模板里只需要写<button appButton>就能同时触发两个组件，而且完全隔离了对第三方库的直接依赖，后续换库只需要改这个自定义组件的内部逻辑。

方法一：通过组件装饰器的host配置实现 #

直接在@Component的host对象里配置要添加的属性，Angular会自动给宿主元素（也就是这个button）加上extButton属性，从而触发第三方的button[extButton]组件。

示例代码：

import { Component } from '@angular/core';

@Component({
  selector: 'button[appButton]',
  template: '<ng-content></ng-content>', // 保留按钮内部的文本或图标
  host: {
    // 如果第三方组件的extButton是无值属性（比如只需要存在这个属性），设为true即可
    '[extButton]': 'true',
    // 如果extButton需要指定值（比如主题类型），用嵌套引号传递字符串
    // '[extButton]': "'primary'"
  }
})
export class AppButtonComponent {}

方法二：用@HostBinding装饰器实现 #

这种方式更灵活，适合需要动态控制属性值的场景，比如根据输入参数切换第三方组件的配置。

示例代码：

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

@Component({
  selector: 'button[appButton]',
  template: '<ng-content></ng-content>'
})
export class AppButtonComponent {
  // 可选：通过输入属性让使用者自定义按钮类型
  @Input() buttonType: string = 'default';

  // 绑定extButton属性到宿主元素
  @HostBinding('attr.extButton') 
  get extButtonAttr() {
    // 返回对应的值，无值属性返回true即可
    return this.buttonType;
  }
}

注意事项 #

1. 确保第三方组件已经在你的Angular模块中导入并声明/导出，否则Angular无法识别extButton指令。
2. 你之前尝试的host.[extButton] = 'something'没生效，是因为host配置的语法错误——正确的写法是在host对象中用键值对定义，键是属性选择器字符串，值是Angular表达式。

这样实现后，所有使用<button appButton>的地方都会自动带上extButton属性，同时触发两个组件的逻辑，而且完全不需要在模板中直接引用第三方库的属性，后续更换组件库时，只需要修改AppButtonComponent内部的绑定逻辑，所有调用处都不用改。

内容的提问来源于stack exchange，提问作者Dino Prašo