Question

我需要翻译我的Angular 4应用程序。基本上我跟着the official guide。

我将i18n属性添加到标签等等
angular-cli创建了一个messages.xlf
我创建了一个文件夹＆＃34; locale＆＃34;在src-folder
我将messages.xlf复制到此locale-folder ...
...并将其重命名为＆＃34;消息。 de .xlf＆＃34;持有德国人翻译

我改变了一个简单的翻译来测试。但是，在我将浏览器切换到＆＃34;德语＆＃34;之后，没有任何区别（使用npm start，所以基本上是＆＃39; ng serve＆＃39;）。似乎仍然缺少某些东西。该指南还解释了how to 'merge' the translation。但是这一章非常奇怪，听起来并不令人信服。它读起来就像是为早期版本完成的。

例如，它声明要调整我的启动脚本。问题是我甚至没有启动脚本。我的index.html看起来像这样：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PickUp2</title>
  <base href="/">

  <link href="assets/iconfont/material-icons.css" rel="stylesheet">
  <link href="roboto.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/material_supply_icon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

我需要在哪里放置此启动脚本？我甚至不知道我是否使用JIT或AOT编译器。以前从未在任何指南中提到它们。

Answer 1

我已经使用Cookbook中描述的方法翻译了我们的Angular-4应用程序。我认为您缺少的关键信息是您需要＆＃34;构建＆＃34;每种语言的应用程序。

我在本地使用一个翻译运行应用程序的命令如下所示：

>ng serve --i18n-file src/i18n/messages.fr.xlf --locale fr --i18n-format xlf --aot

构建它只需用 ng build

替换ng服务

说明：

-i18n-file指定使用哪个翻译
- aot是html模板的提前编译，这将用你的翻译替换标记为i18n的文本

因此，在您的情况下，您将使用德语构建应用程序，然后将其部署 - 或者说 - 发送到/ de文件夹。另一个版本的应用程序可以在/ en等。

然后，您可以根据用户希望的语言将用户重定向到专用应用。

希望这会有所帮助

Angular 4 i18n - 添加翻译文件后如何继续？

1 个答案: