使用动态翻译ID的Angular $ localize

Question

使用新的Angular 9，@ angular/localize现在可以直接从 typescript 中翻译代码。
由于尚未正式记录其用法，因此我发现了一些提示
on this post。

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