Angular 国际化插值字符串

Question

我不确定如何在我的应用中转换动态变量。

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

<ng-container style="display: none;" *ngFor="let report of reports">
<tr>
 <td width="80%" class="colThree" i18n="reportDesc">
   {{report.ReportDescription}} //need translate
  </td>
  </tr>
</ng-container>

Answer 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...`;
        }
    }
}

然后你可以这样做:

在组件模板中:

<td>{{ report.ReportDescription | translateDescriptionPipe }}</td>

在组件代码中:

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: `
    <ng-container [ngSwitch]="description">
      <ng-container *ngSwitchCase="'Variant one'" i18n>...one...</ng-container>
      <ng-container *ngSwitchCase="'Variant two'" i18n>...two...</ng-container>
    </ng-container>
  `,
})
export class TranslatedDescriptionComponent {
    @Input() description: ReportDescription;
}

然后你可以这样做:

<app-translated-description [description]="report.ReportDescription"></app-translated-description>

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

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

代码未经测试:)