Угловой материал: как совместить ngIf, aria-label и 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