使用Angular Localize正确翻译mat-tab的label属性的实现方法

下面分两种主流Angular翻译场景给出对应实现：

方案1：使用ngx-translate第三方翻译库 #

写法1：直接绑定label属性 #

直接通过输入属性绑定配合translate管道实现翻译，适合纯文本标签场景：

<mat-tab-group>
    <mat-tab [label]="'nameToBeTranslated' | translate">
        <!-- 标签页内容 -->
    </mat-tab>
</mat-tab-group>

写法2：自定义标签模板 #

如果标签需要包含图标、动态变量等复杂内容，使用mat-tab-label模板指令实现：

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label>
            {{ 'nameToBeTranslated' | translate }}
            <!-- 可插入图标、其他DOM元素 -->
        </ng-template>
        <!-- 标签页内容 -->
    </mat-tab>
</mat-tab-group>

方案2：使用Angular原生i18n能力 #

写法1：属性级i18n标记 #

直接给label属性指定i18n标记即可：

<mat-tab-group>
    <mat-tab label="原始待翻译文本" i18n-label="@@nameToBeTranslated">
        <!-- 标签页内容 -->
    </mat-tab>
</mat-tab-group>

写法2：自定义标签模板 #

复杂内容场景使用模板写法，给模板内容添加i18n标记：

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label i18n="@@nameToBeTranslated">
            原始待翻译文本
        </ng-template>
        <!-- 标签页内容 -->
    </mat-tab>
</mat-tab-group>

注意事项 #

• 两种方案都需要提前在对应翻译资源文件中，配置nameToBeTranslated键对应的各语言翻译文本
• 涉及动态变量插值的翻译场景，优先选择自定义模板写法，变量处理更灵活

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