用 Angular 构建多语言和多方向网站的最佳方法是啥？

Posted 2023-03-07

【中文标题】用 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 的信息，但我认为它不是正确的解决方案，因为它不提供方向解决方案。

谢谢！

【参考方案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

希望对你有帮助！