使用动态翻译 ID 的 Angular $localize

Question

使用新的 Angular 9 @angular/localize现在可以直接从打字稿翻译代码。由于它的用法没有正式记录，我在这篇文章中找到了一些提示 。

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

当 ID 直接传递给函数时，这可以正常工作，但是如果我希望 ID 是动态的（并传递一个变量），它就不起作用，在不解析或翻译的情况下呈现 ID。

我通过这种方式传递变量来尝试它：

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

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

Answer 1

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

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

这是一个可以在运行时调用的转换订单状态的示例：

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:`;
        }
    }
}

Answer 2

这有效。

不要让我解释，我通过反复试验得到了这个：

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