角材料：如何组合ngIf，aria标签和i18n？

Question

我有以下内容

<mat-form-field>
   <mat-placeholder i18n="@@Title4Version">Title for version</mat-placeholder>
   <input matInput [(ngModel)]="workflowInfo.title" readonly [readOnly]="lockTitle">
   <button mat-button matSuffix mat-stroked-button aria-label="Unlock" (click)="lockTitle=!lockTitle">
        <ng-container *ngIf="lockTitle; else unlocked">
          <mat-icon>lock_open</mat-icon>
        </ng-container>
        <ng-template #unlocked>
          <mat-icon>lock</mat-icon>
        </ng-template>
   </button>
</mat-form-field>

以下屏幕截图如下：

我的问题：

1. 单击锁定按钮并启用编辑，并且
2. 已相应设置了aria-label（即“解锁”或“锁定”）并且
3. 已经为i18n准备好了这个标签

我有一个想法如何完成问题1，但又如何有其他2个选择？是否可以将它们全部放在一个模板中？如果不是，如何将它们分成properly（不重复代码）？

Answer 1

您已经准备好了大部分代码-只需将aria-label属性绑定到表达式即可：

[attr.aria-label]="lockTitle ? 'Unlock' : 'Lock'"

您似乎已经在使用模板翻译，因此您可能可以使用翻译属性功能：https://angular.io/guide/i18n#translate-attributes。

i18n-aria-label