如何在使用AOT编译的Angular中提供备用的i18n语言链接？

Question

我目前正在进行我的Angular应用的i18n工作。我使用xlf文件进行AOT编译，创建预编译应用程序，如此处所述。在构建过程中，我提供了一个特定于语言的基本href（使用--base-href参数）。例如，这意味着我最终会得到两个语言特定的应用程序，使用以下url路径：

• /app_path/en/...
• /app_path/de/...

现在，我想通过在活动url中替换例如en为de来在我的应用程序中提供到相应备选语言的链接。我使用了Router注入，所以我可以访问它的url属性，但是这个属性并不给我包括base-href的完整url。

如何在Angular应用程序内找到基础url？

或者，是否有一种方法可以找出应用程序构建的语言？我能否从xliff文件中以某种方式访问目标语言属性？

- not2savvy

Answer 1

当您针对不同语言编译应用时，请在ng构建过程中设置区域设置：

./node_modules/.bin/ngc --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf

您可以通过将此语言环境注入到组件中来访问它：

import { Inject, LOCALE_ID } from '@angular/core';
...
constructor(@Inject(LOCALE_ID) locale: string, ...

接着，您可以使用语言环境字符串来确定当前的语言。在上面的例子中，语言环境被设置为“es”。

希望这能帮助到您。

- PeterFromCologne

Answer 2

首先，让Angular注入Router和Location对象（不确定为什么需要Router）：

constructor(private router: Router, private location: Location) {}

然后，为了确定基本路径（base href）：

let fullpath = this.location.prepareExternalUrl(this.location.path());
let basepath = fullpath.substr(0, fullpath.lastIndexOf(this.location.path().substr(1)));

最后，这是如何创建备用语言网址列表（在urls中）的方法：

const languages = ["en", "de", "fr", "it"];  // List of available languages 
let urls = [];
for (let lang of languages) {
  let url = basepath.replace(/\/(..)\/$/, "/" + lang + "/") + this.location.path().substr(1);
  if (url !== fullpath) {
    urls.push(url);
  }
}

请注意，在 basepath.replace 中假设了斜杠之间有两个字符的语言代码。对于像 "en-us" 这样的情况，这种方法不适用，需要稍作修改的正则表达式。我仍然没有找到一种方式来识别当前运行应用程序的语言。

- not2savvy