如何在Angular内联Translate Pipe中使用函数并精简代码？

问题背景 #

需要简化Angular模板中Translate管道的使用代码，当前写法需两次调用translate管道、多组花括号，希望找到更简洁的实现方式，同时保留lowerCaseFirstLetter()首字母小写逻辑（避免破坏多语言拼写规范）。

当前代码：

<span
  *ngIf="checkoutForm.get('email')?.errors?.['email']">
  {{ 'eMail' | translate }} {{ lowerCaseFirstLetter('isInvalid' | translate) }}
</span>

尝试的简化写法（未实现预期效果）：

<span
  *ngIf="checkoutForm.get('email')?.errors?.['email']" 
  translate>eMail {{ lowerCaseFirstLetter('isInvalid' | translate) }}
</span>

<span
  *ngIf="checkoutForm.get('email')?.errors?.['email']"
   translate>eMail lowerCaseFirstLetter('isInvalid')
</span>

文本说明 #

• email翻译结果：E-Mail
• isInvalid翻译结果：Is invalid
• lowerCaseFirstLetter()：仅将字符串首字母转为小写，对多语言适配至关重要

最优实现方案 #

采用参数化翻译+自定义管道的方式，既简化模板代码，又保留首字母小写逻辑：

1. 定义参数化翻译键 #

在i18n翻译文件（如en.json）中添加组合式翻译键：

{
  "email": "E-Mail",
  "isInvalid": "Is invalid",
  "error.email.invalid": "{{emailLabel}} {{invalidMessage}}"
}

2. 创建首字母小写自定义管道 #

替代组件内的lowerCaseFirstLetter()方法，用管道适配Angular模板的翻译流程：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'lowerCaseFirst' })
export class LowerCaseFirstPipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;
    return value.charAt(0).toLowerCase() + value.slice(1);
  }
}

记得在对应NgModule中声明该管道。

3. 简化模板代码 #

使用translate指令结合参数绑定，一次性完成翻译和格式处理：

<span
  *ngIf="checkoutForm.get('email')?.errors?.['email']"
  [translate]="'error.email.invalid'"
  [translateParams]="{
    emailLabel: 'email' | translate,
    invalidMessage: ('isInvalid' | translate) | lowerCaseFirst
  }">
</span>

可选优化 #

若想让翻译逻辑更灵活，可将首字母小写规则整合到翻译参数处理中，但自定义管道的方式通用性更强，能适配不同语言的拼写规范。

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