Angular Material中Translate管道在aria-label内失效问题

这个问题其实挺常见的，Angular对原生HTML属性和DOM属性的绑定规则容易搞混～

你遇到的错误是因为Angular默认把模板里的属性绑定（不管是插值还是方括号写法）当成DOM元素的属性（property），但aria-label是HTML属性（attribute），并非button元素的DOM属性。button的DOM对象上没有对应的ariaLabel属性（注意驼峰命名），所以Angular会报错说找不到这个属性。

解决方案 #

给aria-label加上attr.前缀，明确告诉Angular这是要绑定原生HTML属性：

<button mat-raised-button color="accent" class="submit-button" 
        [attr.aria-label]="'REGISTER.CREATE' | translate" 
        [disabled]="registerForm.invalid"> 
  {{'REGISTER.CREATE' | translate}} 
</button>

如果你更习惯用插值语法，也可以直接写（无需方括号）：

<button mat-raised-button color="accent" class="submit-button" 
        aria-label="{{'REGISTER.CREATE' | translate}}" 
        [disabled]="registerForm.invalid"> 
  {{'REGISTER.CREATE' | translate}} 
</button>

第一种用[attr.xxx]的属性绑定方式更符合Angular的风格，尤其是当绑定值包含表达式（比如这里的管道转换）时，可读性和一致性更好。

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