Question

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

Answer 1

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

app.component.html

生成翻译文件后，每个文件中都会显示相应的<div i18n-dir dir="ltr">  </div>，trans-unit包含默认方向，在这种情况下为source。因此，您只需将单位的ltr设置为target即可获得相应的语言。

Answer 2

问题在于主要的cloud.aws.region.static=us-east-2 cloud.aws.stack.auto=false（和一些其他文件）不是模板，并且您不能用它做一些事情（例如翻译）。参见this issue。

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

为您的主要index.html创建翻译版本，并将其插入名为index.html语言代码的文件夹中（在我的情况下为rtl）：

src / fa / index.html ：
```
fa
```
^{特别参见 <!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"来做同样的事情！因为我们在ltr 中进行了其他更改）。

为了更好地理解，我还在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",文件如何处理（如果您需要可安装的PWA）？

第一步如上。在manifest.json中创建翻译版本：

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文件）。

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

Answer 3

从2017年开始，Angular团队似乎太忙了，几乎没有人可以向angular-translate模块（https://github.com/angular-translate/angular-translate/issues/260）添加从右到左（rtl）支持。

不过没什么大不了的，因为仅使用本机JS即可轻松做到这一点...

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

以我的经验，HTML5在正确完成rtl支持方面做得很好。

Angular 2+定位（i18n）rtl支持

3 个答案: