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

Odd*_*Dev 19 internationalization angular

我需要翻译我的Angular 4应用程序.基本上我跟着官方指南.

  1. 我将i18n属性添加到标签等等

  2. angular-cli创建了一个messages.xlf

  3. 我在src-folder中创建了一个文件夹"locale"

  4. 我将messages.xlf复制到这个locale-folder ...

  5. ...它重新命名为"消息. .xlf"举行德语翻译

我改变了一个简单的翻译来测试.然而,在我将浏览器切换到"德语"后,没有任何区别(使用npm start,所以基本上'ng serve').似乎仍然缺少某些东西.该指南还解释了如何"合并"翻译.但这一章非常奇怪,听起来不太令人信服.它读起来就像是为早期版本完成的.

例如,它声明要调整我的启动脚本.问题是我甚至没有启动脚本.我的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>
Run Code Online (Sandbox Code Playgroud)

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

Pet*_*gne 11

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

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

>ng serve --i18n-file src/i18n/messages.fr.xlf --locale fr --i18n-format xlf --aot
Run Code Online (Sandbox Code Playgroud)

构建它只是用ng build替换ng服务

解释:

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

所以在你的情况下,你将用德语构建应用程序,然后将它 - 比如说 - 发布到/ de文件夹.另一个版本的应用程序可能在/ en等.

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

希望这可以帮助