Angular 国际化插值字符串

分享于2022年07月17日 angular angular-i18n angular-localize 问答
【问题标题】:Angular 国际化插值字符串(Angular Internationalization Interpolated Strings)
【发布时间】:2022-06-22 21:00:18
【问题描述】:

我不确定如何在我的应用程序中对动态变量进行翻译。

目前,我在静态 json 文件中有报告描述。我正在遍历其内容并在 HTML 文件中使用字符串插值。有没有办法在不使用选择 ICU 表达式的情况下翻译 @angular/localize 中的插值字符串?



 
   {{report.ReportDescription}} //need translate
  
  


【解决方案1】:

我个人发现使用管道很方便,特别是如果您还需要在组件代码中转换值:

type ReportDescription = "Variant one" | "Variant two";

@Pipe({
    name: "translateDescriptionPipe",
})
export class TranslateDescriptionPipe implements PipeTransform {
    transform(value: ReportDescription): string {
        switch (value) {
            case "Variant one":
                return $localize`...one...`;
            case "Variant two":
                return $localize`...two...`;
        }
    }
}

你可以这样做:

在组件模板中:

{{ report.ReportDescription | translateDescriptionPipe }}

在组件代码中:

const translationPipe = new TranslateDescriptionPipe(); // or via constructor injection
translationPipe.transform(report.ReportDescription);

您可能想阅读 how to mark text for internationalization in component code

如果您只需要在模板内进行翻译,您可以创建一个组件:

@Component({
    selector: 'app-translated-description',
    template: `
    
      ...one...
      ...two...
    
  `,
})
export class TranslatedDescriptionComponent {
    @Input() description: ReportDescription;
}

你可以这样做:


当然,如果适合您的需要,您也可以将开关直接集成到现有组件中。

您可能想阅读 how to mark text for internationalization in component template

代码未经测试 :)