用 angular 构建多语言多方向网站的最佳方法是什么？

Question

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

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

我想知道是否有其他足够的方法来建立一个Angular 6 支持多方向的网站？我读过有关 i18n 的内容，但我认为这不是正确的解决方案，因为它没有提供方向解决方案。

谢谢！

Answer 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

Answer 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

希望对您有所帮助！

用 angular 构建多语言多方向网站的最佳方法是什么？

What is the best way to build a multi-language and multi-directions website with angular?

multilingual

angular