首页 文章

Angular 2路线 - 重定向到不同的应用程序

提问于
浏览
1

我正在用其他语言生成各种版本的应用程序 . 我正在使用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认识到URL中的 fr 指向不同的应用程序 . 也许我'm missing a build configuration or something? Here'我的脚本在 package.json 用于构建法语版本:

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

3 回答

  • 0

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

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

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

  • 1

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

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

  • 2

    我能够通过为我的.NET后端配置管道来加载不同语言版本的应用程序,以便为每个不同的语言应用程序加载Angular静态索引页面(在代码中称为“SPA”) . 它的工作原理是检查请求网址中是否存在第一个子文件夹的“index.html”页面(例如'/ fr /','/ de /'),如果存在则加载该页面:

    Startup.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应用程序? )

相关问题