Angular $localize 使用动态翻译 ID

Question

随着新的Angular 9，@angular/localize现在可以直接从typescript中翻译代码。 由于它的使用方法没有官方文档，我在这篇文章中找到了一些技巧。

$localize`:@@my-trans-unit-id:` // IT WORKS

当直接将ID传递给该函数时，它可以正确地工作，但如果我想让ID成为动态的（并且传递一个变量），它就无法正常工作，使ID没有被解析或翻译。

我尝试通过以下方式传递变量：

const id = "my-trans-unit-id";

$localize`:@@${id}:`; // NOT WORKING
$localize`:@@`+id+`:`; // NOT WORKING

- Gothem

---

我处于同样的情况。 - Xaris Fytrakis

Answer 1

Angular没有提供任何生成动态翻译的机制，因为它们在编译时生成。

我最终创建了管道并在需要翻译时调用它们。我使用多个$localize调用来返回正确的ID翻译，而不是使用1个唯一指令来翻译字符串。

这是一个在运行时调用的订单状态翻译示例：

import { Pipe, PipeTransform } from '@angular/core';
import { OrderStatusEnum } from 'installation-status.enum';

@Pipe({
    name: 'orderStatusRenderer'
})
export class OrderStatusRendererPipe implements PipeTransform {
    constructor() {}

    transform(value: number, ...args: any[]): any {
        switch (value) {
            case OrderStatusEnum.PREPARING:
                return $localize`:@@order.status.preparing:`;
            case OrderStatusEnum.SHIPPED:
                return $localize`:@@order.status.shipped:`;
            case OrderStatusEnum.COMPLETED:
                return $localize`:@@order.status.completed:`;
        }
    }
}

- Gothem

Answer 2

这个有效。

别问我怎么解释，我是通过试错得到的：

const localize = $localize;
const id = "my-trans-unit-id";
const translation = localize(<any>{ '0': `:@@${id}:${id}`, 'raw': [':'] });

- Guilherme Meinlschmiedt Abdo

---

有趣的解决方案，但不幸的是我遇到了错误：“TypeError: Cannot create property 'message' on string [...]: Unexpected messageParts for $localize (expected an array of strings).”，使用 Angular 12.2.8 的 ng extract-i18n。 - fservantdev

看这个问题 => https://github.com/angular/angular/issues/35376。我认为可能是由于 Angular CLI 的某些优化例程引起的。你能否尝试使用编辑后的解决方案，并检查生成的输出是否正确？（首先将 $localize 分配给一个常量，然后再使用它） - Guilherme Meinlschmiedt Abdo

Answer 3

您可以创建自己的标记模板函数来处理trans-unit id的转换：

const transUnitId = '@@Messages.Greeting';
const name = 'Joe';
const message = $localizeId`${transUnitId}:TRANSUNITID:Hi ${name}:NAME:, translated with run-time created trans-unit id.`;
// Original
// message = Hi Joe, translated with run-time created trans-unit id.
// German
// message = Hallo Joe, übersetzt mit einer zur Laufzeit erstellten Trans-Unit-Id.

export function $localizeId(messageParts: TemplateStringsArray, ...expressions: any[]): string {
  // Create writeable copies
  const messagePartsCopy: any = [...messageParts];
  const messagePartsRawCopy = [...messageParts.raw];

  // Strip trans-unit-id element
  const prefix = messagePartsCopy.shift();
  const prefixRaw = messagePartsRawCopy.shift();
  const transUnitId = expressions.shift();

  // Re-add prefix and replace :TRANSUNITID: with transUnitId.
  messagePartsCopy[0] = prefix + messagePartsCopy[0].replace(':TRANSUNITID:', `:@@${transUnitId}:`);
  messagePartsRawCopy[0] = prefixRaw + messagePartsRawCopy[0].replace(':TRANSUNITID:', `:${transUnitId}:`);

  // Create messageParts object
  Object.defineProperty(messagePartsCopy, 'raw', {value: messagePartsRawCopy});

  // Call original localize function
  return $localize(messagePartsCopy as TemplateStringsArray, ...expressions);
}

- Florian