Angular 本地化的基本 URL答案

【问题标题】：Angular localized base URLAngular 本地化的基本 URL
【发布时间】：2017-11-29 21:09:28
【问题描述】：

我正在学习 Angular v.5 + Express，我想使用 Angular i18n 工具将应用程序翻译成 2 种语言。我希望我的网址包含我使用的语言，如下所示：mysite.com/en/controller/...

我的想法是使用AOT编译器，根据the guideline。然后，通过 Express 提供相应的文件夹。因此，我将有 2 个构建版本的应用程序，每个版本都在自己的目录中。

问题是我需要在 index.html 文件中定义基本 url

<head>
  <meta charset="utf-8">
  <title>Title</title>
  <base href="/en/">
  ...
</head>

并且 URL 取决于当前语言。我期望的是我可以做类似的事情

<base i18n href="/en/">

然后在我的翻译文件中指定替代路径。但是，这不起作用。难道我做错了什么？将 i18n 与具有此类 URL 模式的 AngularJS5 一起使用的正确方法是什么？

【问题讨论】：

您好，仅供参考，如果您谈到 v2+，您必须说 Angular，旧版本称为 AngularJS

标签： javascript angular

【解决方案1】：

您必须在网址中包含语言吗？如果您删除了它，您可以将您的基本 url 设置为/。在这种情况下，您的快速服务器将检测用户的语言并提供正确的资产。因此，如果请求/controllers/myController.js，并且用户的语言是西班牙语，则服务器将返回来自/es_ES/controllers/myController.js 的文件。

PS：我相信 AOT 编译器仅适用于 Angular 2+，所以我假设您实际上使用的是 Angular 而不是 AngularJS。

【讨论】：

感谢您的回答。不，我不必这样做，但在我的服务器端，我只知道一种检测语言的方法——通过匹配 URL。如果您能建议在没有 URL 匹配的情况下检测（和切换）语言的方法，那就太好了。
这很简单，请查看：stackoverflow.com/questions/11845471/…

【解决方案2】：

一个不错的解决方案可能是使用 ngx-translate（这与 angularJS 的 angular-translate 相同。

Ngx-translate 有一个你需要的插件：

Localize Router by @meeroslav：Angular 路由本地化的实现。如果您需要本地化网址（例如 /fr/page 和 /en/page）。

Ngx 翻译链接：https://github.com/ngx-translate/core

这是插件链接：https://github.com/Greentube/localize-router

【讨论】：

【解决方案3】：

你不需要改变“index.html”中的base href，你可以在“angular.json”构建配置中定义baseHref，例如"baseHref": "/fr/".

参考 Angular I18N 文档https://angular.io/guide/i18n#build-for-multiple-locales

【讨论】：