4

我正在用其他语言生成我的应用程序的各种版本。我正在使用 AOT（提前）编译，所以我最终得到了一个结构如下的静态可部署站点：

dist -
  index.html -- entry file for the default (English language) app
  -fr
    index.html -- entry file for French language version
  -de
    index.html -- entry file for German language version

我目前可以使用下拉菜单在主要语言网站之间切换，用户可以在其中选择他们的首选语言，然后我使用纯 JavaScript 加载所需站点的主条目文件，如下所示：

const baseUrl = window.location.origin;
window.location.href = baseUrl + '/' + requestedLanguage + '/index.html'; // e.g. requestedLanguage = 'fr'

这是可行的，因为请求实际文件似乎index.html意味着 Angular 不会将请求解释href为 Angular 路由。

不过，我想要发生的是，当用户输入路径中已经包含语言版本的 URL 时，我希望提供该语言版本。我还希望保留 URL 路径，以便 Angular 路由为请求的 URL 加载适当的组件。

例如：

  • 用户输入myDomain.com/fr/myPage

  • 子目录下的应用程序/fr/被加载，该应用程序中的 Angular 路由加载相关组件MyPage

目前，如果我输入 URL myDomain.com/fr/myPage，Angular 路由会尝试将所需的子文件夹解释fr为不存在的路由，因此出现以下错误：

Error: Cannot match any routes. URL Segment: 'fr/instruments'

如何加载所需的应用程序和正确的组件？必须有一种方法可以让 Angular 识别frURL 中的 引用不同的应用程序。也许我缺少构建配置或其他东西？package.json这是我构建法语版本的脚本：

"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
4

3 回答 3

1

只需使用组件而不是不同的单独应用程序并使用以下示例 >

{path:'',component:EnHomeComponent},
  {path:'contact',component:EnContactComponent},
  {path:'fr',component:LayoutComponent,
   children:[
     {path:'',component:FrHomeComponent},
     {path:'contact',component:FrContactComponent}]}

然后您可以通过 URL 直接访问页面

于 2018-06-15T07:14:56.043 回答
1

对英语、法语和丹麦语的不同路径使用角度router概念。

然后使用基于语言的路径。

于 2018-06-15T07:09:41.140 回答
0

通过像这样为我的 .NET 后端配置管道，我能够加载应用程序的不同语言版本，以便为每个不同的语言应用程序加载 Angular 静态索引页面（在代码中称为“SPA”）。它通过检查请求 URL 中的第一个子文件夹是否存在“index.html”页面（例如“/fr/”、“/de/”）来工作，如果该页面存在，它会加载该页面：

启动.cs

public class Startup
{
    public void Configuration()
    {
        app.Use((context, next) =>
        {
            if (!context.Request.Path.HasValue)
                return next();

            IFileInfo fi;
            string spaIndex = "index.html";

            Uri uri = new Uri(context.Request.Uri.ToString());
            var segs = uri.Segments;
            var folder = segs.Length > 1 ? String.Format("/{0}", segs[1]) : "/";

            if (!physicalFileSystem.TryGetFileInfo(context.Request.Path.Value, out fi)) {

                // check if this is a request for a sub-application, e.g an alternative language version
                // if so, load the app
                if (physicalFileSystem.TryGetFileInfo(String.Format("{0}{1}", folder, spaIndex), out fi))
                {
                    context.Request.Path = new PathString(String.Format("{0}{1}", folder, spaIndex));                           
                }
            }

            return next();
        });
    }
}

URL 的其余部分（语言子文件夹之后的部分）然后被解释为已加载的应用程序内的路由（例如法语应用程序）。这意味着为应用程序加载了正确的组件（我不完全确定这部分是如何工作的 - 也许路径的其余部分会落入 .NET 请求管道的不同部分并传递到 Angular 应用程序？ )

于 2018-06-18T04:12:25.760 回答