Angular 9：打字稿中的国际化

Question

我研究了 Angular9 中的新 i18n 功能。https://angular.io/guide/i18n

如何翻译 TypeScript 中的文本，例如SnackBar 消息？

Answer 1

查看此博客https://blog.ninja-squad.com/2019/12/10/angular-localize/

2022 年更新

@Component({
  template: '{{ title }}'
})
export class HomeComponent {
  title = $localize`You have 10 users`;
}

和

You have to manually add it to your messages.fr.xlf

<trans-unit id="6480943972743237078">
  <source>You have 10 users</source>
  <target>Vous avez 10 utilisateurs</target>
</trans-unit>

别忘了重新提交您的 angular 申请。

ID更新

@Component({
  template: '{{ title }}'
})
export class HomeComponent {
  title = $localize`:@@6480943972743237078:`;
}

https://github.com/angular/angular/blob/252966bcca91ea4deb0e52f1f1d0d3f103f84ccd/packages/localize/init/index.ts#L31

Answer 2

translationId更好的做法是：

title = $localize`:@@Home.Title:Some title text`

并且您必须手动将其添加到您的 messages.xx.xlf（例如 messages.fr.xlf 等）

<trans-unit id="Home.Title">
  <source>Some title text</source>
  <target>TRANSLATION_HERE</target>
</trans-unit>

Answer 3

这里有一些脚本可以用来提取 html + ts 端本地化到 xlf 文件。所以你像@Cyclion建议的那样使用 $localize 。此解决方案使用 Ocombe 的 locl cli 包 https://www.npmjs.com/package/@locl/cli 首先您需要在没有本地化的情况下构建您的项目。

ng build ProjectName --localize=false

然后您可以使用 locl 工具从“二进制 js”文件中提取翻译。我使用 0.0.1-beta.6 -version 因为它不会在 xlf 文件中生成目标部件。那些目标部分将破坏与 xlf-merge 的合并。而且 ng xi18n 工具也不会生成那些目标部分，因此合并后结构是一致的。

npx locl extract -s='dist/ProjectName/**/*.js' -f=xlf -o='projects/ProjectName/src/locale/messages_extracted.xlf' --locale=fi

然后你可以结合ng xi18n结果和这个结果。这包含来自 html 和 ts 的所有翻译，但没有 ng xi18n 命令从 html 侧翻译提供的元数据。我为此使用 xlf-merge。

xlf-merge ./projects/ProjectName/src/locale/messages_extracted.xlf projects/ProjectName/src/locale/messages.xlf -o projects/ProjectName/src/locale/messages.xlf

此合并命令会将所有缺失的 ts 端翻译添加到消息末尾。xlf-file

这是整个脚本。

ng xi18n --project=ProjectName --output-path src/locale && ng build ProjectName --localize=false && npx locl extract -s='dist/ProjectName/**/*.js' -f=xlf -o='projects/ProjectName/src/locale/messages_extracted.xlf' --locale=fi && xlf-merge ./projects/ProjectName/src/locale/messages_extracted.xlf projects/ProjectName/src/locale/messages.xlf -o projects/ProjectName/src/locale/messages.xlf

完成这些步骤后，您就拥有了 messages.xlf 中的所有翻译标签。然后您需要 generate/translate 每个语言文件，例如使用 xliffmerge 工具。

Answer 4

我使用 this 打字稿装饰器进行翻译！我发现它更有效率...... https://github.com/mustafah/translations

Angular 9：打字稿中的国际化

Angular 9: i18n in TypeScript

angular

angular-material

internationalization

angular9

2022 年更新