在 Angular Material Design 的 aria-label 中翻译管道失败答案

【问题标题】：Translate pipe fails within aria-label in Angular Material Design在 Angular Material Design 的 aria-label 中翻译管道失败
【发布时间】：2018-10-12 09:23:46
【问题描述】：

也许是一个微不足道的问题，但我无法通过谷歌搜索找到任何答案。

在我的 Angular 5 应用程序中，我有这样的 HTML：

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

这会产生以下错误：

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'aria-label' since it isn't a known property of 'button'. ("             </div>

                <button mat-raised-button color="accent" class="submit-button" [ERROR ->]aria-label="{{'REGISTER.CREATE' | translate}}"
                        [disabled]="registerForm.inval"): ng:///Register2Module/FuseRegister2Component.html@76:79
syntaxError

但如果我写：

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

我完全没有错误。

这超出了我的理解。这是 Angular 实现 Google MAT 的问题还是我遗漏了什么？

提前谢谢你

【问题讨论】：

你如何删除 {{ }} 和 'REGISTER.CREATE' | translate
@Tin 感谢 Tin，但它不起作用。编译器没有抱怨，但输出文本根本没有被翻译。就像写 SOME.DIRECT.TEXT
嘿@Raffaele 我不知道你是否已经得到答案。我找到了这个stackoverflow.com/questions/42658800/…。这正是你想要的。 attr.aria-label="{{'REGISTER.CREATE' | translate}}"
@Tin 可以，谢谢。如果您将评论作为答案发表，我会将其标记为已接受。

标签： angular angular-material2 translate

【解决方案1】：

如果来自 *ngFor 的值，则需要删除 ''

      <mat-nav-list dir="rtl" *ngIf="(categories$ | async) as categories">
    <a mat-list-item *ngFor="let category of categories" 
     attr.aria-label="{{category.name | translate}}"
     (click)="onSidenavCloseClick()" [routerLink]="category.link"
      routerLinkActive="active">
      {{category.name | translate}}
    </a>
  </mat-nav-list>

【讨论】：

【解决方案2】：

添加attr.，如下所示：

attr.aria-label="{{'REGISTER.CREATE' | translate}}"

参考：How to bind dynamic data to ARIA-LABEL?

【讨论】：