logo标签列表

Angular 9: TypeScript中的i18n

angularangular-materialinternationalizationangular9
25
为什么不给出评论就进行负评？ - NoobieNoob
我认为你正在寻找$localize。如果我没记错，一旦 Angular 的 i18n 设置成功完成，$localize 应该是全局可用的，你可以使用 $localize\MY_STRING_TO_BE_TRANSLATED`。再次强调，我还没有深入研究过 Angular 的 i18n 实现，所以请谨慎对待。总的来说，我建议目前使用 ngx-translate` 而不是 Angular 提供的解决方案。 - Philipp Meissner
@NoobieNoob，Muhammet 下面的回答有什么问题？ - David
4个回答
31

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

2022年更新

来自官方文档：https://angular.io/api/localize

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

并且

您需要手动将其添加到您的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

我能够使用上述方法带着ID运行。也许它会起作用。@Jimbo - Muhammet Can TONBUL
1
是的，就是这样。我现在遇到的问题是它无法从我的xlf文件中读取文本。如果我在ID旁提供文本，则使用该文本，但更改文件中的翻译文本没有效果。更改文件后，是否需要执行某些操作以更新翻译文本？ - Jimbo
1
这个项目帮助我将json文件用作翻译资源。 https://github.com/loclapp/locl - Xaris Fytrakis
这是Angular关于本地化的博客文章：https://blog.angular.io/angular-localization-with-ivy-4d8becefb6aa - Gabriel machts
我在 Angular 13 中进行了测试，ng extract-i18n --output-path {your_path} 可以生成 TypeScript 中 $localize 的 trans-unit。 - Arash
8

更好的翻译 ID 的方法是：

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>
2
2
这里有一些脚本可以用来提取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版本，因为它不会在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端翻译添加到messages.xlf文件的末尾。
以下是整个脚本。
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中获得所有的翻译标签。接着，您需要使用例如xliffmerge工具来生成/翻译每个语言文件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接