用 Angular 构建多语言和多方向网站的最佳方法是什么？答案

【问题标题】：What is the best way to build a multi-language and multi-directions website with angular?用 Angular 构建多语言和多方向网站的最佳方法是什么？
【发布时间】：2019-01-10 01:26:40
【问题描述】：

所以我要建立一个全新的网站，它必须支持英语、法语和希伯来语，注意希伯来语是 RTL 语言。

我决定使用 Angular 6 构建网站。我正在考虑构建两个模板，一个用于每个方向（LTR 和 RTL），并分别用所选语言的内容填充此模板。

我想知道是否还有其他足够的方法来构建支持多方向的 Angular 6 网站？我已经阅读了有关 i18n 的信息，但我认为它不是正确的解决方案，因为它不提供方向解决方案。

谢谢！

【问题讨论】：

标签： angular multilingual

【解决方案1】：

我使用服务和管道制作了这个示例，它运行良好。您需要删除应用程序上的以下内容：我已对其发表评论。

import * as en from './i18n/en.json';
import * as de from './i18n/de.json';
import * as ar from './i18n/ar.json';

const langs = { ar: ar, en: en, de: de };

并激活此行以动态导入 json 文件：

this.languagesObject = require(`./i18n/${value}.json`);

演示：https://stackblitz.com/edit/angular-translator-using-service-and-pipe

【讨论】：

不适用于多元主义...停止在 2.. stackblitz.com/edit/…
@Willian 你想做什么？
我尝试做多元化
负数, 0, 1, 2 “更多项目...无穷大”
有帮助吗？

【解决方案2】：

以防万一有人正在寻找一个库来管理 Angular2+ 中的多语言。你可以使用这个震撼的库：https://github.com/ngx-translate/core。

将其添加到您的项目中：

npm install @ngx-translate/core --save

然后将其导入您的 AppModule：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

然后，一个好的做法是将它导出到 SharedModule 中，这样您就不必在应用程序的每个模块中都导入它（您只需要导入 SharedModule）：

@NgModule({
    exports: [
        CommonModule,
        TranslateModule
    ]
})
export class SharedModule { }

参考：https://github.com/ngx-translate/core

希望对你有帮助！

【讨论】：