Angular 2+ 本地化 (i18n) rtl 支持

Question

将右到左 (rtl) 支持添加到本地化 Angular 2+ 应用程序（例如希伯来语和阿拉伯语）的最佳做法是什么？我浏览了几个教程，包括 Internationalization (i18n)，但 none 似乎涵盖了这一点。例如，我希望 html 方向属性（例如 <html dir="rtl">）与应用程序构建步骤中 18n 属性中定义的翻译一起添加。

Answer 1

可以将 i18n-dir 添加为 described in the docs。因此，到目前为止我发现的最佳方法是将 i18n-dir dir="ltr"（其中 ltr 是默认方向）添加到根组件模板（例如 app.component.html）中的根元素，如下所示：

<div i18n-dir dir="ltr">
    <!-- The rest of the content --> 
</div>

一旦您生成翻译文件，相应的 trans-unit 将出现在每个文件中，其中 source 包含默认方向，在本例中为 ltr。因此，您只需要将相应语言的单位target设置为rtl即可。

Answer 2

问题是主要的 index.html（和其他一些文件）不是模板，您不能用它做一些事情（例如翻译）。参见 this issue。

但是因为这是一个简单的过程，所以我尝试自己做：

创建您的主要 index.html 的翻译版本并将其插入以您的 rtl 语言代码命名的文件夹中（fa 在我的例子中） :

src/fa/index.html:

<!doctype html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="utf-8">
    <title>عنوان برنامه</title>
    <base href="/fa/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#1976d2">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<noscript>برای ادامه استفاده از این برنامه لازم است JavaScript را فعال کنید.</noscript>
</body>
</html>

^{尤其见lang="fa"和dir="rtl"和母语文本.}

在相关的构建配置中（在我的例子中：production-fa 和 fa）在你的 angular.json 文件中放置：
```
"index": "src/fa/index.html"
```

完成。

您可以对其他语言执行相同操作（甚至 ltrs！因为我们在 index.html 中进行了其他更改）。

为了更好地理解，我还在 package.json 文件中插入了相关的构建脚本：

    "start-fa": "ng serve --configuration=fa",
    "build-fa": "ng build --configuration=fa",
    "build-prod-fa": "ng build --prod --configuration=production-fa",

奖励：manifest.json 文件呢（如果你想要一个可安装的 PWA）？

第一步同上。在 src/fa/manifest.json:

中创建翻译版本

{
    "dir": "rtl",
    "lang": "fa",
    "name": "نام بلند برنامه",
    "short_name": "نام کوتاه",
    "theme_color": ...
    ...

不过第二步有点难。我找不到定义其路径的方法。您可以用这个替换原来的 (src/manifest.json)。您必须在构建过程开始之前执行此操作（而不是在它之后通过替换 dist/.../manifest.json；因为 @angular/service-worker 需要在构建过程中知道其最终状态 ）。所以在你的 package.json:

"build-prod-fa": "cp src/fa/manifest.json src/manifest.json && ng build --prod --configuration=production-fa",

并在默认生产构建之前将其恢复为默认版本（在我的例子中，默认语言是 en）：

"build-prod": "cp src/en/manifest.json src/manifest.json && ng build --prod",

请注意，大约 manifest.json 只有 production 构建很重要。因为默认情况下 serviceWorker 仅在这些配置中启用（请参阅您的 angular.json 文件）。

^{我知道这不是一个理想的解决方案。因为您将需要在多个地方编辑源代码（在这两个文件中）。}

Answer 3

截至 2017 年，Angular 团队似乎太忙而且人数太少，无法向 angular-translate 模块添加从右到左 (rtl) 支持（https://github.com/angular-translate/angular-translate/issues/260).

不过没什么大不了的，因为只用原生 JS 就很容易做到这一点...

document.body.setAttribute("dir", "rtl");

根据我的经验，HTML5 在正确完成 rtl 支持方面做得非常好。

Angular 2+ 本地化 (i18n) rtl 支持

Angular 2+ localization (i18n) rtl support

localization

right-to-left

typescript

angular