Question

我正在使用Angular的i18n设置构建一个小的Angular应用程序。一切正常，除了url路径和段的翻译。我尝试了一种可能的解决方案，即按每种语言提供路由模块（如此处所述），但这没有用。

我认为我可以执行以下操作，但是我不知道在哪里注入LOCALE_ID：

app-routing.module.ts

import { LOCALE_ID, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main/main.component';

const i18nRoutes = {
    de: {
        main: 'inhalte',
        // ...
    }, 
    fr: {
        main: 'contenu',
        // ...
    }
}

const currentLanguage = i18nRoutes[ LOCALE_ID ]; // <-- Apparently not working, since I have to inject LOCALE_ID. But where?

const routes: Routes = [
    {
        path: '',
        redirectTo: currentLanguage.main,
        pathMatch: 'full'
    },
    {
        path: currentLanguage.main + '/:key',
        component: MainComponent
    }
    // ...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

更新以进行澄清

在angular.json中，我以每种语言设置了构建过程的配置（摘自here，并在2018年进行了修改）

angular.json

{
    // ...
    "projects": {
        "my-app": {
            // ...
            "architect": {
                "build": {
                    // ...
                    "configurations": {
                        // ...
                        "de": {
                            "i18nFile": "src/i18n/de.xliff",
                            "outputPath": "dist/de",
                            "i18nFormat": "xlf",
                            "i18nLocale": "de",
                            "baseHref": "/de/"
                            // ...
                        },
                        "fr": {
                            "i18nFile": "src/i18n/fr.xliff",
                            "outputPath": "dist/fr",
                            "i18nFormat": "xlf",
                            "i18nLocale": "fr",                            
                            "baseHref": "/fr/",
                            // ...
                        }
                   }
              }
          }
     }
}

要一次构建所有应用，请输入npm run buildall，它会在package.json中执行以下操作：

package.json

{
    "name": "my-app",
    // ...
    "scripts": {
        // ...
        "buildall": "for lang in de fr;do ng build --configuration=$lang; done"
    }
}

可以在dist文件夹的子目录中生成所有应用。

因此，回到我的原始问题：提供的answer by Exterminator不符合我的需求，因为

引导时我无法设置固定的语言环境
在构造函数中注入LOCALE_ID为时已晚，因为我需要app-routing.module.ts中的值

我希望我能解释清楚。 但是也许我完全误会了一些东西。无论如何，请先感谢您的帮助。我仍在学习，我必须承认一些概念对我来说仍然很模糊。

Answer 1

将此添加到app.module

providers: [{provide: LOCALE_ID, useValue: 'fr-FR'}]

然后在任何需要的地方使用以下方法调用它

import {LOCALE_ID} from '@angular/core';

  constructor(@Inject(LOCALE_ID) locale: string){
    console.log('locale', locale);
  }

您也可以使用此方法

platformBrowserDynamic([{provide: LOCALE_ID, useValue: 'en-EN'}]).bootstrapModule(AppModule, {providers: [{provide: LOCALE_ID, useValue: 'en-EN'}]});

Answer 2

我遇到了同样的问题，这就是我解决的方法。

我创建了一个BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))文件，该文件只有一个要导出的常量，然后可用于LOCALE_ID提供程序设置区域设置ID。

src / app / app-locale.ts

app-locale.ts

我在/* WARNING: This file is to help facilitate the auotmation of the build process. In order to set the locale during development, change the value by hand to the target locale. If the file name or location is changed make sure to update the build scripts accordingly. */ export const APP_LOCALE_ID:string = "es-es";中使用了以上常量来提供app.module.ts。

src / app / app.module.ts

LOCALE_ID

现在，我需要一个小的脚本，该脚本将在构建开始之前运行，它将在文件import { LOCALE_ID, NgModule, TRANSLATIONS, TRANSLATIONS_FORMAT } from "@angular/core"; import { APP_LOCALE_ID } from './app-locale'; ... providers: [{ provide: TRANSLATIONS_FORMAT, useValue: "xlf" }, { provide: TRANSLATIONS, useFactory: (locale) => { locale = locale || 'en-US'; return require(`raw-loader!../locale/messages.${locale}.xlf`); }, deps: [LOCALE_ID] }, { provide: LOCALE_ID, useValue: APP_LOCALE_ID } ], ...中设置本地ID。因此，我编写了这个小节点脚本并将其放在单独的“脚本”文件夹中。

scripts / set-app-locale.js

app-locale.ts

接下来，我将继续更改const fs = require('fs'); const argv = require('minimist')(process.argv.slice(2)); var version = '0.0.1', appLocale = "en-US", appLocaleFile = "./src/app/app-locale.ts", help = ` Set the static locale for the app. Usage: node <path>set-app-locale.js [options] Options: --version Show version number [boolean] --help, -h Show help [boolean] --app-locale Target locale id [string] --app-locale-file [string] Path and name of app-locale that contains only one constant which is a const string that holds the locale value. [default: "${__dirname}/src/app/app-locale.ts"] `; var setArgs = function(){ if (argv.version){ console.log(version); return false; } if (argv.h || argv.help){ console.log(help); return false; } appLocale = argv["app-locale"] || appLocale; appLocaleFile = argv["app-locale-file"] || appLocaleFile; return true; } var setLocale = function(locale){ var fileData = `/* WARNING: This file is to help facilitate the automation of the build process. In order to set the locale during development, change the value by hand to the target locale. If the file name or location is changed make sure to update the build scripts accordingly. */ export const APP_LOCALE_ID:string = "${locale}";`; fs.writeFile(appLocaleFile, fileData, function(err) { if(err) { return console.log(err); } console.log(`App locale changed to ${locale}`); }); } setArgs() && setLocale(appLocale);，使其包含设置区域设置ID。

package.json

package.json

我使用@ngx-i18nsupport中的.... "config": {"locales": "en-US es-es"}, "scripts": { ... "i18n-build": "for lang in $npm_package_config_locales; do node ./scripts/set-app-locale.js --app-locale=$lang && ng build --prod --configuration=$lang; done" } ....。这有助于我避免每次提取字符串时都覆盖先前提取和转换的字符串。

因此，现在每当我针对所有受支持的语言环境构建应用程序时，都会正确设置LOCALE_ID。我确信必须有其他方法可以解决此问题，但这就是我解决的方法。

如何在Angular i18n路由器模块中使用LOCALE_ID

更新以进行澄清

2 个答案: