Angular中Input装饰器能否使用带点/横杠的别名？如何实现？

首先明确：Angular的@Input装饰器不支持直接用attr.作为别名前缀——attr.是模板中绑定HTML属性的语法，不属于输入属性别名的合法命名规则。

但你要实现的“动态绑定attr.aria-label并在指令中获取值”的需求完全可以实现，不需要用带点的别名，具体步骤如下：

1. 在指令中定义不带attr.的输入属性别名
   直接把别名设为aria-label（横杠命名是允许的，Angular会自动处理与类属性的驼峰映射）：

   @Directive({ selector: '[yourDirective]' })
   export class YourDirective {
     // 用aria-label作为输入属性别名，类属性用驼峰ariaLabel
     @Input('aria-label') ariaLabel!: string;
   
     ngOnInit() {
       // 这里可以拿到动态绑定的值
       console.log(this.ariaLabel);
     }
   }
   

2. 在模板中动态绑定attr.aria-label
   直接使用[attr.aria-label]绑定动态值，Angular会自动把这个属性的值传递给指令的aria-label输入属性：

   <!-- dynamicValue是组件中的动态变量 -->
   <div yourDirective [attr.aria-label]="dynamicValue"></div>
   

为什么之前的写法不生效？ #

你之前写的@Input('attr.aria-label')是错误的，因为输入属性的别名只能是合法的HTML属性名或组件输入属性名，attr.不属于别名的一部分——它只是模板中“绑定HTML原生属性”的标识，和指令的输入属性别名是两个概念。

额外说明 #

如果你的场景是需要监听aria-label属性的变化，还可以结合OnChanges生命周期钩子：

ngOnChanges(changes: SimpleChanges) {
  if (changes['ariaLabel']) {
    console.log('aria-label值变化了:', changes['ariaLabel'].currentValue);
  }
}

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